<div class="dark-overlay hidden"></div>
<div class="light-overlay hidden"></div>

<div class="loading-spinner hidden">
    <div class="main-loader"></div>
    <ul class="loading-info">
        <li class="step3">[$8579]</li>
        <li class="step2">[$8578]</li>
        <li class="step1">[$8577]</li>
        <li class="status-txt">[$8577]</li>
    </ul>
    <div class="loader-progressbar">
        <div class="loader-percents"></div>
    </div>
</div>

<!-- Dropdown: create-new-folder -->
<div class="dropdown create-new-folder body popup dropdown-arrow hidden">
    <i class="dropdown-white-arrow"></i>
    <div class="create-folder-size-icon full-size hidden"></div>
    <div class="fm-dialog-body">
        <div class="create-folder-input-bl">
            <input type="text" value="" placeholder="[$157]" autofocus />
            <i class="sprite-fm-mono icon-folder-filled"></i>
        </div>
        <div class="whitespaces-input-warning">
            <span>[$whitespaces_on_filename]</span>
        </div>
        <div class="duplicated-input-warning">
            <span>[$23219]</span>
        </div>
    </div>
    <div class="fm-notifications-bottom">
        <button class="mega-button positive create-folder-button">
            <span>[$455]</span>
        </button>
        <button class="mega-button create-folder-button-cancel">
            <span>[$82]</span>
        </button>
    </div>
    <div class="create-folder-loader hidden">
        <div class="cr-fountaing">
            <div class="fountaing-circle cr-fountaing_1"></div>
            <div class="fountaing-circle cr-fountaing_2"></div>
            <div class="fountaing-circle cr-fountaing_3"></div>
            <div class="fountaing-circle cr-fountaing_4"></div>
            <div class="fountaing-circle cr-fountaing_5"></div>
            <div class="fountaing-circle cr-fountaing_6"></div>
            <div class="fountaing-circle cr-fountaing_7"></div>
            <div class="fountaing-circle cr-fountaing_8"></div>
        </div>
    </div>
</div>

<div class="imported-contacts-notification hidden">
    <div class="imported-notification-close"></div>
    <span>[$6851]</span>
</div>

<!-- Loading overlay: payment-processing -->
<div class="payment-processing hidden">
    <div class="payment-animation-pad">
        <img class="payment-animation" alt="">
        <div class="payment-animation-txt">[$6960]</div>
    </div>
</div>

<!-- megasync-overlay -->
<!-- Please add "warning" classname !-->
<div class="nw-dark-overlay megasync-overlay hidden theme-light-forced">
    <div class="megasync-close"></div>
    <div class="megasync-close-txt">[$6951]</div>
    <div class="megasync-content features">
        <div class="megasync-logo"></div>
        <div class="megasync-info">
            [$7138]<br />
            [$7139]
        </div>
        <div>
            <div class="mega-input dropdown-input box-style inline megasync-dropdown hidden">
                <span>[$7086]</span>
                <i class="sprite-fm-mono icon-dropdown"></i>
                <div class="mega-input-dropdown hidden">
                    <div class="dropdown-scroll"></div>
                </div>
            </div>
        </div>
        <div class="megasync-table">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <th>
                    </th>
                    <th>
                        <span class="globe">[$7087]</span>
                    </th>
                    <th>
                        <span class="sync">[$1626]</span>
                    </th>
                </tr>
                <tr>
                    <td>
                        <span>[$7088]</span>
                    </td>
                    <td>
                        <span class="dots">[$1165]</span>
                    </td>
                    <td>
                        <span class="tick">[$7089]</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>[$7090]</span>
                    </td>
                    <td>
                        <span class="dots">[$7152]</span>
                    </td>
                    <td>
                        <span class="tick">[$msync_overl_light]</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>[$7093]</span>
                    </td>
                    <td>
                        <span class="dots">[$1149]</span>
                    </td>
                    <td>
                        <span class="tick">[$7094]</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="megasync-content slider slide1">
        <header>
            <div class="fm-dialog-close medium">
                <i class="sprite-fm-mono icon-dialog-close"></i>
            </div>
            <div class="clear"></div>
        </header>
        <div class="megasync-body">
            <div class="megasync-slider main-block">
                <div class="megasync-slider-wrap">
                    <div class="megasync-slider body-block">

                        <div class="megasync-slide slide0 hidden">
                            <div class="megasync-header">
                                That's impressive!
                            </div>
                            <div class="megasync-img img0">
                                <div class="megasync-text">
                                    It appears that you are trying to transfer a large amount of files. This can lead to performance issues when downloading with your browser. Try our app for enhanced performance on file transfers.
                                </div>
                            </div>
                        </div>

                        <div class="megasync-slide slide1">
                            <div class="megasync-backup-bg"></div>
                            <div class="megasync-header">[$20758]</div>
                            <div class="megasync-backup-img sprite-fm-illustration img-dialog-desktop-app"></div>

                            <div class="megasync-slide-info">
                                <div class="small-header">
                                    [$19639]
                                </div>
                                <div class="big-header">
                                    [$backup_tool_header]
                                </div>
                                <div class="txt">
                                    [$backup_tool_info]
                                </div>
                            </div>
                        </div>

                        <div class="megasync-slide slide2">
                            <div class="megasync-header">[$20758]</div>
                            <div class="megasync-img img1">
                                <div class="megasync-slide-info">
                                    <div class="small-header">
                                        [$19639]
                                    </div>
                                    <div class="big-header">
                                        [$19646]
                                    </div>
                                    <div class="txt">
                                        [$19647]
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="megasync-slide slide3">
                            <div class="megasync-header">
                                [$16863]
                            </div>
                            <div class="megasync-img img2">
                                <div class="megasync-text">
                                    [$16582]
                                </div>
                            </div>
                        </div>

                        <div class="megasync-slide slide4">
                            <div class="megasync-header">
                                [$16864]
                            </div>
                            <div class="megasync-features">
                                <div class="megasync-text">
                                    [$16873]
                                </div>
                                <div class="megasync-feature">
                                    <div class="bottom-page big-icon folders"></div>
                                    <div class="megasync-feature-txt">
                                        [$16585]
                                    </div>
                                </div>
                                <div class="megasync-feature">
                                    <div class="bottom-page big-icon arrows"></div>
                                    <div class="megasync-feature-txt">
                                        [$16587]
                                    </div>
                                </div>
                                <div class="megasync-feature">
                                    <div class="bottom-page big-icon up-down"></div>
                                    <div class="megasync-feature-txt">
                                        [$desktop_dialog_faster_browser]
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <button class="mega-button large icon round megasync-slider prev transition">
                        <div>
                            <i class="sprite-fm-mono icon-arrow-left"></i>
                        </div>
                    </button><!--
                    --><button class="mega-button large icon round megasync-slider next transition">
                        <div>
                            <i class="sprite-fm-mono icon-arrow-right"></i>
                        </div>
                    </button>

                    <div class="megasync-buttons">
                        <button class="mega-button positive large download download-megasync transition">
                            <span>[$20826]</span>
                        </button><!--
                        --><button class="mega-button large download continue-with-browser transition hidden">
                            <span>[$20827]</span>
                        </button>
                    </div>
                </div>
                <!-- Please add "waring" classname to ".megasync-overlay" !-->
                <!-- Please add "ff"/"safari"/"opera"/"edge"/"ie" classname !-->
                <div class="megasync-bottom-warning">
                    <span><i class="download big-icon"></i></span>
                    <span class="txt">[$16865]</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="nw-dark-overlay upload-overlay hidden">
    <div class="upload-overlay-body">
        <div class="upload-overlay-icon"></div>
        <div class="upload-overlay-txt">[$7403]</div>
    </div>
</div>

<div class="nw-dark-overlay megasync-upload-overlay hidden theme-dark-forced">
    <div class="overlay-close">
        <i class="fm-dialog-close overlay-close-icon sprite-fm-mono icon-dialog-close"></i>
        <span>[$6951]</span>
    </div>
    <div class="megasync-content">
        <div class="megasync-title">
            <i class="page-icon pages-sprite sync"></i>
            <span>[$19639]</span>
        </div>
        <div class="megasync-info">
            [$12488]
        </div>
        <div class="fm-mega-dialog-pad">

            <div class="megasync-bottom">
                <button class="mega-button download-button continue">
                    <span>
                        [$8846]
                    </span>
            </button>
                <button class="mega-button positive download-button download">
                    <span>
                        [$desktopapp_dialog_btn]
                    </span>
                </button>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
            <div class="feedback-label-txt">
                <div class="checkdiv checkboxOff">
                    <input type="checkbox" name="megasync_upload" id="megasync_upload" checked="checked" />
                </div>
                <label for="megasync_upload" class="radio-txt">[$229]</label>
            </div>
        </div>
    </div>
</div>

<div class="nw-dark-overlay camera-access hidden">
    <div class="camera-top-block">
        <div class="camera-top-icon"></div>
        <div class="camera-top-txt">
            [$12483]
        </div>
    </div>
    <div class="camera-bottom-block">
        <div class="camera-bottom-pad">
            <div class="camera-bottom-txt">
                [$7417]
            </div>
            <div class="camera-bottom-icon headset">
                [$7418]
            </div>
            <div class="camera-bottom-icon pause">
                [$12484]
            </div>
        </div>
    </div>
</div>

<div class="hidden" id="avatar-svg"></div>

<!-- Overlay -->
<div class="voucher-redeem-dialog theme-dark-forced hidden">
    <div class="payment-close">
        <i class="payment-close-icon sprite-fm-mono icon-dialog-close"></i>
        <span></span>
    </div>
    <div class="account-information">
        <div class="left-information">
            <div class="pricing-page plan">
                <div class="pricing-page plan-icon">
                    <i class="pro1 sprite-fm-uni icon-crests-pro-1-details"></i>
                    <i class="pro2 sprite-fm-uni icon-crests-pro-2-details"></i>
                    <i class="pro3 sprite-fm-uni icon-crests-pro-3-details"></i>
                    <i class="pro4 sprite-fm-uni icon-crests-lite-details"></i>
                    <i class="business sprite-fm-uni icon-crests-business-details"></i>
                    <i class="feature"></i>
                </div>
                <div class="pricing-page plan-title"></div>
                <div class="pricing-page plan-content">
                    <div class="pricing-page plan-price">
                        <span class="price"></span>
                    </div>
                    <div class="pricing-page plan-currency"></div>
                    <div class="pricing-page plan-period">
                        /[$931]
                    </div>
                    <div class="pricing-page plan-data storage"><span></span> [$495]</div>
                    <div class="pricing-page plan-data transfer"><span></span> [$18057]</div>
                </div>
            </div>
        </div>
        <div class="right-information">
            <div class="title-text">[$7706]</div>
            <div class="balance-text">[$7707]</div>
            <div class="complete-upgrade-text">
                [$7708]<br>
                [$7709]
            </div>
            <div class="buttons">
                <button class="mega-button large positive complete-upgrade-button" data-plan-id="">
                    <span>[$7710]</span>
                </button>
                <div class="choose-plan-button">[$7711]</div>
            </div>
        </div>
    </div>
</div>

<section class="text-editor-container hidden">

        <div class="text-editor">
            <header>
                <nav class="text-editor-bars">
                    <ul class="bar menu">
                        <li>
                            <button class="file-btn">[$18055]</button>
                        </li>
                        <li>
                            <button class="format-btn">[$24931]</button>
                        </li>
                    </ul>
                     <ul class="bar control">
                        <li>
                            <button class="minimize hidden">
                                 <i class="sprite-fm-mono icon-minimise-component"></i>
                            </button>
                        </li>
                         <li>
                            <button class="close-btn" aria-label="[[close dialog]]">
                                 <i class="sprite-fm-mono icon-close-component"></i>
                            </button>
                        </li>
                    </ul>
                </nav>

                <template id="text-editor-file-menu">
                    <nav class="context-menu open-vertical file-menu avoid-bottom" aria-expanded="false">
                        <ul>
                            <li>
                                <button class="new-f">
                                    <span>[$19976]</span>
                                </button>
                            </li>
                            <li>
                                <button class="open-f">
                                    <span>[$22661]</span>
                                    <div class="shortcut">Ctrl O</div>
                                </button>
                            </li>
                            <li class="divider">
                                <hr/>
                            </li>
                            <li>
                                <button class="get-link-f">
                                    <span>[$5622]</span>
                                </button>
                            </li>
                            <li>
                                <button class="send-contact-f">
                                    <span>[$17764]</span>
                                </button>
                            </li>
                            <li class="divider">
                                <hr/>
                            </li>
                            <li>
                                <button class="close-f">
                                    <span>[$148]</span>
                                    <div class="shortcut">Ctrl Q</div>
                                </button>
                            </li>
                            <li>
                                <button class="save-f">
                                    <span>[$776]</span>
                                    <div class="shortcut">Ctrl S</div>
                                </button>
                            </li>
                            <li>
                                <button class="save-as-f">
                                    <span>[$22664]</span>
                                    <div class="shortcut">Ctrl Shift S</div>
                                </button>
                            </li>
                            <li class="divider">
                                <hr/>
                            </li>
                            <li>
                                <button class="print-f">
                                    <span>[$22665]</span>
                                    <div class="shortcut">Ctrl P</div>
                                </button>
                            </li>
                        </ul>
                    </nav>
                </template>
                <template id="text-editor-format-menu">
                    <nav class="context-menu open-vertical format-menu avoid-bottom" aria-expanded="false">
                        <ul>
                            <li>
                                <button class="wrap-text">
                                    <span>[$24137]</span>
                                    <i class="sprite-fm-mono icon-check green-tick"></i>
                                </button>
                            </li>
                        </ul>
                    </nav>
                </template>

                <div class="text-editor-file-name">
                    <!-- TODO: replace by svg icon !-->
                    <i class="item-type-icon icon-text-24"></i>
                    <span></span>
                </div>
            </header>

            <section class="content">
                <textarea class="txtar"></textarea>
            </section>

            <footer>
                <button class="mega-button action download-btn" title="[$preview_download_tip]">
                    <div>
                        <i class="sprite-fm-mono icon-download"></i>
                    </div>
                    <span>[$preview_download_button]</span>
                </button>
                <button class="mega-button positive gradient save-btn" title="[$preview_save_tip]">
                    <span>[$776]</span>
                </button>
            </footer>
        </div>

</section>

<section class="media-viewer-container theme-dark-forced hidden">
    <div class="media-viewer">
        <header>
            <nav class="viewer-bars">
                <ul class="bar menu">
                     <li class="simpletip" >
                        <button class="v-btn simpletip download" aria-label="[$58]" data-simpletip="[$58]" data-simpletipoffset="2" data-simpletip-class="theme-dark-forced">
                            <i class="sprite-fm-mono icon-download-small"></i>
                        </button>
                    </li>
                    <li>
                        <button class="v-btn simpletip send-to-chat hidden" aria-label="[$17764]" data-simpletip="[$17764]" data-simpletipoffset="2" data-simpletip-class="theme-dark-forced">
                            <i class="sprite-fm-mono icon-send-to-chat"></i>
                        </button>
                    </li>
                    <li>
                        <button class="v-btn simpletip getlink" aria-label="[$5622]" data-simpletip="[$5622]" data-simpletipoffset="2" data-simpletip-class="theme-dark-forced">
                            <i class="sprite-fm-mono icon-link"></i>
                        </button>
                    </li>
                    <li>
                        <button class="v-btn simpletip info" aria-label="[$6859]" data-simpletip="[$6859]" data-simpletipoffset="2" data-simpletip-class="theme-dark-forced">
                            <i class="sprite-fm-mono icon-info"></i>
                        </button>
                    </li>
                    <li>
                        <button class="v-btn simpletip remove" aria-label="[$delete_permanently]" data-simpletip="[$delete_permanently]" data-simpletipoffset="2" data-simpletip-class="theme-dark-forced">
                            <i class="sprite-fm-mono icon-bin"></i>
                        </button>
                    </li>
                    <li>
                        <button class="v-btn simpletip options" aria-label="[$22746]" data-simpletip="[$22746]" data-simpletipoffset="2" data-simpletip-class="theme-dark-forced">
                            <i class="sprite-fm-mono icon-options"></i>
                        </button>
                    </li>
                </ul>
                <div class="file-info">
                    <div class="file-name"></div>
                    <div class="counter"></div>
                </div>
                <ul class="bar control">
                     <li>
                        <button class="v-btn simpletip close" aria-label="[$148]" data-simpletip="[$148]" data-simpletipoffset="2" data-simpletip-class="theme-dark-forced">
                            <i class="sprite-fm-mono  icon-dialog-close"></i>
                        </button>
                    </li>
                </ul>
            </nav>

            <template id="media-viewer-options-menu">
                <nav class="context-menu open-vertical options-menu avoid-bottom" aria-expanded="false">
                    <ul>
                        <li>
                            <button class="info">
                                <i class="sprite-fm-mono icon-info"></i>
                                <span>[$6859]</span>
                            </button>
                        </li>
                        <li>
                            <button class="favourite">
                                <!-- Active state: .icon-favourite-removed !-->
                                <i class="sprite-fm-mono icon-favourite"></i>
                                <span>[$5871]</span>
                            </button>
                        </li>
                        <li>
                            <button class="set-sensitive">
                                <i class="sprite-fm-mono icon-eye-hidden"></i>
                                <span>[$sen_hide]</span>
                            </button>
                        </li>
                        <li class="divider">
                            <hr/>
                        </li>
                        <li>
                            <button class="send-to-chat">
                                <i class="sprite-fm-mono icon-message-arrow-up-small-regular-outline"></i>
                                <span>[$17764]</span>
                            </button>
                        </li>
                        <li class="divider">
                            <hr/>
                        </li>
                        <li>
                            <button class="add-to-album">
                                <i class="sprite-fm-mono rectangle-stack-plus-small-regular-outline"></i>
                                <span>[$add_to_album]</span>
                            </button>
                        </li>
                        <li class="divider">
                            <hr/>
                        </li>
                        <li>
                            <button class="remove">
                                <i class="sprite-fm-mono icon-bin"></i>
                                <span>[$move_to_rubbish_bin]</span>
                            </button>
                        </li>
                    </ul>
                </nav>
            </template>
        </header>

        <section class="content" data-fullscreen="false" id="videoContainer">

            <div class="img-wrap" data-count="">
                <img alt="" class="img1" />
                <img alt="" class="img2" />
            </div>

            <div class="viewer-rounded slideshow-controls-upper hidden">
                <button class="sl-btn close" aria-label="[[close]]">
                    <i class="sprite-fm-mono icon-dialog-close"></i>
                </button>
            </div>

            <template id="media-viewer-settings-menu">
                <nav class="context-menu slideshow-context-settings options-menu avoid-bottom" aria-expanded="false">
                    <ul>
                        <li>
                            <div class="message">[$ss_settings_header]</div>
                        </li>
                        <li>
                            <button class="speed sprite-fm-mono-after icon-arrow-right-after">
                                <span class="title">[$ss_settings_speed]</span>
                                <span class="current"></span>
                            </button>
                            <nav class="speed context-menu options-menu avoid-bottom" aria-expanded="false">
                                <ul>
                                    <li>
                                        <button class="slow">
                                            <span></span>
                                            <i class="sprite-fm-mono icon-active icon-green hidden"></i>
                                        </button>
                                        <button class="normal">
                                            <span></span>
                                            <i class="sprite-fm-mono icon-active icon-green hidden"></i>
                                        </button>
                                        <button class="fast">
                                            <span></span>
                                            <i class="sprite-fm-mono icon-active icon-green hidden"></i>
                                        </button>
                                    </li>
                                </ul>
                            </nav>
                        </li>
                        <li>
                            <button class="order sprite-fm-mono-after icon-arrow-right-after">
                                <span class="title">[$ss_settings_order]</span>
                                <i class="sprite-fm-mono"></i>
                            </button>
                            <nav class="order context-menu options-menu avoid-bottom" aria-expanded="false">
                                <ul>
                                    <li>
                                        <button class="default-order">
                                            <i class="sprite-fm-mono"></i>
                                            <span>[$ss_settings_order_opt_def]</span>
                                            <i class="sprite-fm-mono icon-active icon-green hidden"></i>
                                        </button>
                                        <button class="shuffle">
                                            <i class="sprite-fm-mono"></i>
                                            <span>[$ss_settings_order_opt_1]</span>
                                            <i class="sprite-fm-mono icon-active icon-green hidden"></i>
                                        </button>
                                        <button class="newest">
                                            <i class="sprite-fm-mono"></i>
                                            <span>[$ss_settings_order_opt_2]</span>
                                            <i class="sprite-fm-mono icon-active icon-green hidden"></i>
                                        </button>
                                        <button class="oldest">
                                            <i class="sprite-fm-mono"></i>
                                            <span>[$ss_settings_order_opt_3]</span>
                                            <i class="sprite-fm-mono icon-active icon-green hidden"></i>
                                        </button>
                                    </li>
                                </ul>
                            </nav>
                        </li>
                        <li>
                            <div class="switch-option">
                                <span class="title">[$ss_settings_repeat]</span>
                                <div class="mega-switch toggle-on" id="repeat">
                                    <div class="mega-feature-switch no-trans-init"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </nav>
            </template>

            <video id="video" data-autoplayvideo="false" data-playvideoonclick="false"></video>

            <button class="gallery-btn previous" aria-label="[[previous]]">
                <i class="sprite-fm-mono icon-arrow-left-regular-outline"></i>
            </button>
            <button class="gallery-btn next" aria-label="[[next]]">
                <i class="sprite-fm-mono icon-arrow-right-regular-outline"></i>
            </button>

            <div class="loader-grad hidden">
                <i class="sprite-fm-mono icon-loader-grad-small-regular-outline"></i>
            </div>

            <div class="play-video-button hidden">
                <i class="sprite-fm-mono icon-play-small-regular-solid"></i>
            </div>

            <div class="play-pause-video-button hidden">
                <i class="sprite-fm-mono icon-play-small-regular-solid"></i>
            </div>

            <div class="watch-again-button hidden">
                <i class="sprite-fm-mono icon-rotate-ccw-small-regular-outline"></i>
                <span>[$video_player_watch_again]</span>
            </div>

            <div class="watch-again-button-overlay"></div>

            <div class="bouncing-loader viewer-pending hidden">
                <span></span><span></span><span></span>
            </div>

            <div class="loader-grad-overlay"></div>

            <div class="viewer-error hidden">
                <div class="viewer-error-header">
                    [$135]
                </div>
                <div class="viewer-error-txt">
                </div>
                <div class="viewer-error-buttons">
                    <div class="viewer-button viewer-refresh">
                        <i class="medium-icon icons-img refresh"></i>
                        [$85]
                    </div>
                    <div class="viewer-button viewer-error-close">
                        <i class="medium-icon icons-img close"></i>
                        [$1898]
                    </div>
                </div>
            </div>

            <div class="viewer-progress vo-hidden">
                <ul>
                    <li class="right-c"><p><span></span></p></li>
                    <li class="left-c"><p><span></span></p></li>
                </ul>
            </div>

            <div class="viewer-slideshow-controls hidden">
                <div class="viewer-big-button prev">
                    <i class="semi-big-icon icons-img prev"></i>
                </div>
                <div class="viewer-big-button pause" data-state="pause">
                    <i class="semi-big-icon icons-img pause"></i>
                </div>
                <div class="viewer-big-button next">
                    <i class="semi-big-icon icons-img next"></i>
                </div>
                <div class="viewer-big-button left-pad close">
                    <i class="semi-big-icon icons-img cross"></i>
                </div>
                <div class="clear"></div>
            </div>
        </section>

        <footer>
            <nav class="viewer-bars image-controls hidden">
                <button class="v-btn simpletip browserscreen" aria-label="Expand" data-simpletipoffset="2" data-simpletip="[$20172]" data-simpletipposition="top" data-simpletip-class="theme-dark-forced">
                    <i class="sprite-fm-mono icon-new-window"></i>
                </button>
                <ul class="bar">
                     <li class="hidden">
                        <button class="v-btn view" aria-label="[[grid view]]">
                            <!-- Active state: .icon-image-grid-view-up !-->
                            <i class="sprite-fm-mono icon-image-grid-view-up"></i>
                        </button>
                    </li>
                    <li>
                        <button class="v-btn slideshow simpletip" aria-label="[$17802]" data-simpletipoffset="2" data-simpletip="[$17802]" data-simpletipposition="top" data-simpletip-class="theme-dark-forced">
                            <i class="sprite-fm-mono icon-play"></i>
                        </button>
                    </li>
                </ul>
                <div class="zoom-slider-wrap">
                    <button class="v-btn simpletip zoom-out" aria-label="[$24927]" data-simpletipoffset="2" data-simpletip="[$24927]" data-simpletipposition="top" data-simpletip-class="theme-dark-forced">
                        <i class="sprite-fm-theme icon-image-zoom-out"></i>
                    </button>
                    <div class="zoom-slider"></div>
                    <button class="v-btn simpletip zoom-in" aria-label="[$24928]" data-simpletipoffset="2" data-simpletip="[$24928]" data-simpletipposition="top" data-simpletip-class="theme-dark-forced">
                        <i class="sprite-fm-theme icon-image-zoom-in"></i>
                    </button>
                </div>
                <ul class="bar control">
                     <li>
                        <button class="v-btn simpletip fullscreen" aria-label="[$17803]" data-simpletipoffset="2" data-simpletip="[$17803]" data-simpletipposition="top" data-simpletip-class="theme-dark-forced">
                            <!-- Active state: .icon-fullscreen-leave !-->
                            <i class="sprite-fm-mono icon-fullscreen-enter"></i>
                        </button>
                    </li>
                </ul>
            </nav>

            <nav class="viewer-bars video-controls hidden" data-state="hidden">
                <div class="video-progress-block">
                    <div class="video-progress-bar">
                        <div class="video-time-bar"></div>
                        <div class="video-expected-time-bar">
                            <div class="video-progress-time">
                                00:00
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="bar">
                    <li>
                        <div class="playpause-wrapper wrapper">
                            <button class="v-btn playpause" aria-label="[[play pause]]" data-state="play">
                                <!-- Active state: .icon-pause !-->
                                <i class="sprite-fm-mono icon-play-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_play]
                            </div>
                        </div>
                        <div class="vol-wrapper wrapper">
                            <button class="v-btn mute" data-state="mute" aria-label="[[volume]]">
                                <!-- Active state: .icon-volume-muted !-->
                                <i class="sprite-fm-mono icon-volume-max-small-regular-outline"></i>
                            </button>
                            <div class="video-vol-range">
                                <div class="volume-bar"><span></span></div>
                            </div>
                            <div class="tooltip">
                                [$video_player_mute]
                            </div>
                        </div>
                    </li>
                    <li class="timing">
                        <div class="video-timing current">
                            00:00
                        </div>
                        <div>
                            /
                        </div>
                        <div class="video-timing duration">
                            00:00
                        </div>
                    </li>
                    <li>
                        <div class="speed-wrapper wrapper">
                            <button class="v-btn speed" aria-label="[[speed]]" data-state="speed">
                                <i class="sprite-fm-mono icon-playback-1x-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_playback_speed]
                            </div>
                        </div>
                        <div class="repeat-wrapper wrapper">
                            <button class="v-btn repeat" aria-label="[[repeat]]" data-state="repeat">
                                <i class="sprite-fm-mono icon-repeat-one-small-regular-solid"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_repeat]
                            </div>
                        </div>
                        <div class="subtitles-wrapper wrapper">
                            <button class="v-btn subtitles" aria-label="[[subtitles]]" data-state="subtitles">
                                <i class="sprite-fm-mono icon-subtitles-02-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_subtitles]
                            </div>
                        </div>
                        <div class="settings-wrapper wrapper">
                            <button class="v-btn settings" aria-label="[[settings]]" data-state="settings">
                                <i class="sprite-fm-mono icon-settings-02-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$823]
                            </div>
                        </div>
                        <div class="fs-wrapper wrapper">
                            <button class="v-btn fs" aria-label="[[fullscreen]]" data-state="go-fullscreen">
                                <!-- Active state: .icon-fullscreen-leave !-->
                                <i class="sprite-fm-mono icon-maximize-02-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_fullscreen]
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>

            <nav class="viewer-bars slideshow-controls hidden">
                <div class="bar">
                    <button class="sl-btn previous" aria-label="[previous]]">
                        <i class="sprite-fm-mono icon-rwd"></i>
                    </button>
                    <button class="sl-btn playpause" aria-label="[[play pause]]" data-state="pause">
                        <i class="sprite-fm-mono icon-pause"></i>
                    </button>
                    <button class="sl-btn next" aria-label="[[next]]">
                        <i class="sprite-fm-mono icon-ff"></i>
                    </button>
                </div>
                <div class="bar">
                    <button class="sl-btn settings" aria-label="[[settings]]">
                        <i class="sprite-fm-mono icon-slider-outline"></i>
                    </button>
                </div>
            </nav>

            <div class="viewer-vad-control lato hidden"></div>
            <div class="viewer-vad-info hidden">
                <div class="vad-info-title">
                    <i></i>
                    <p></p>
                </div>
                <div class="vad-info-txt"></div>
                <button class="mega-button positive">
                    <span>[$ad_more]</span>
                </button>
            </div>

            <div class="video-progress-bar vad" title="">
                <div class="video-time-bar"></div>
            </div>

            <template id="media-viewer-speed-menu">
                <nav class="context-menu playback-speed options-menu avoid-bottom" aria-expanded="false">
                    <ul>
                        <li>
                            <div class="title">[$video_player_playback_speed]</div>
                        </li>
                        <li>
                            <button class="05x">
                                <span>[$video_player_speed_0.5x]</span>
                                <i class="sprite-fm-mono icon-active icon-check-small-regular-outline hidden"></i>
                            </button>
                        </li>
                        <li>
                            <button class="1x">
                                <span>[$video_player_speed_1x]</span>
                                <i class="sprite-fm-mono icon-active icon-check-small-regular-outline"></i>
                            </button>
                        </li>
                        <li>
                            <button class="15x">
                                <span>[$video_player_speed_1.5x]</span>
                                <i class="sprite-fm-mono icon-active icon-check-small-regular-outline hidden"></i>
                            </button>
                        </li>
                        <li>
                            <button class="2x">
                                <span>[$video_player_speed_2x]</span>
                                <i class="sprite-fm-mono icon-active icon-check-small-regular-outline hidden"></i>
                            </button>
                        </li>
                    </ul>
                </nav>
            </template>
            <template id="media-viewer-subtitles-menu">
                <nav class="context-menu subtitles options-menu avoid-bottom" aria-expanded="false">
                    <ul>
                        <li>
                            <div class="title">[$video_player_subtitles]</div>
                        </li>
                        <li class="options">
                            <div class="options-wrapper">
                                <button class="off">
                                    <span>[$video_player_off]</span>
                                    <i class="sprite-fm-mono icon-active icon-check-small-regular-outline"></i>
                                </button>
                            </div>
                        </li>
                        <li class="divider">
                            <hr/>
                        </li>
                        <li>
                            <button class="add">
                                <span>[$video_player_add_subtitles]</span>
                            </button>
                        </li>
                    </ul>
                </nav>
            </template>
            <template id="subtitles-dialog-subtitles-grid-table">
                <div class="subtitles-grid-table grid-scrolling-table">
                    <div class="grid-wrapper">
                        <table class="grid-table table-hover">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th megatype="fname">
                                        <div class="name">[$86]</div>
                                    </th>
                                    <th megatype="size">
                                        <div class="size">[$87]</div>
                                    </th>
                                    <th megatype="timeAd">
                                        <div class="date">[$17445]</div>
                                    </th>
                                    <th megatype="location">
                                        <div class="location">[$17818]</div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </template>
            <template id="subtitles-dialog-empty-subtitles">
                <div class="empty-subtitles">
                    <div class="empty-subtitles-wrapper">
                        <i class="empty-subtitles-icon sprite-fm-mono icon-subtitles-02-small-regular-solid"></i>
                        <div class="empty-subtitles-txt">[$video_player_no_subtitle_files]</div>
                    </div>
                </div>
            </template>
            <template id="media-viewer-video-settings-menu">
                <nav class="context-menu settings options-menu avoid-bottom" aria-expanded="false">
                    <ul>
                        <li>
                            <div class="settings-wrapper">
                                <span>[$video_player_brightness]</span>
                                <div class="settings-range">
                                    <span>0</span>
                                    <div class="settings-bar brightness-bar"><span></span></div>
                                    <div class="value">50</div>
                                    <span>100</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="settings-wrapper">
                                <span>[$video_player_contrast]</span>
                                <div class="settings-range">
                                    <span>0</span>
                                    <div class="settings-bar contrast-bar"><span></span></div>
                                    <div class="value">50</div>
                                    <span>100</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="settings-wrapper">
                                <span>[$video_player_saturation]</span>
                                <div class="settings-range">
                                    <span>0</span>
                                    <div class="settings-bar saturate-bar"><span></span></div>
                                    <div class="value">50</div>
                                    <span>100</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <button class="reset-all invisible">[$video_player_reset_all]</button>
                        </li>
                    </ul>
                </nav>
            </template>
        </footer>
    </div>
</section>

<div class="fm-versioning overlay hidden">
    <div class="fm-versioning header">
        <div class="fm-versioning button settings" aria-label="[$17580]">
            <i class="sprite-fm-mono icon-settings"></i>
        </div>
        <div class="fm-versioning button close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </div>
        <div class="fm-versioning pad">
            <div class="fm-versioning top-column">
                <div class="item-type-icon-90"></div>
                <div class="fm-versioning file-data">
                    <div class="fm-versioning file-name"></div>
                    <div class="fm-versioning file-path"></div>
                </div>
            </div>
            <div class="fm-versioning top-column versioning-buttons">
                <button class="mega-button positive js-download" title="[$58]">
                    <div>
                        <i class="sprite-fm-mono icon-download-filled"></i>
                    </div>
                    <span>[$58]</span>
                </button><!--
                --><button class="mega-button js-preview">
                    <div>
                        <i class="sprite-fm-mono icon-file-edit"></i>
                    </div>
                    <span>[$version_preview]</span>
                </button><!--
                --><button class="mega-button js-revert">
                    <div>
                        <i class="sprite-fm-mono icon-versions-previous"></i>
                    </div>
                    <span>[$16475]</span>
                </button><!--
                --><button class="mega-button negative js-delete">
                    <div>
                        <i class="sprite-fm-mono icon-bin-filled"></i>
                    </div>
                    <span>[$1730]</span>
                </button><!--
                --><button class="mega-button negative js-clear-previous">
                    <div>
                        <i class="sprite-fm-mono icon-versions-clear"></i>
                    </div>
                    <span>[$17147]</span>
                </button>
            </div>
        </div>
    </div>
    <div class="fm-versioning body">
        <!-- TODO: Init jScrollPane !-->
        <div class="fm-versioning scroll-bl">
            <div class="content"></div>
        </div>
    </div>
</div>

<!-- Drag and Drop overlay !-->
<div class="drag-n-drop overlay hidden" id="dragndrop-overlay">
    <div class="drag-n-drop content">
        <div class="drag-n-drop header">
            [$17742]
        </div>
        <hr>
        <div class="drag-n-drop info-block">
            <i></i><span>[$16560]</span>
        </div>
    </div>
</div>

<!-- Sort and filter dialog for Tree panel and Dialog Tree -->
<div class="dropdown body dialog-sorting-menu hidden">
    <div class="dropdown-section sort-by">
        <span class="dropdown-color-txt">[$7331]</span>
        <a data-by="name" class="dropdown-item asc active">
            <i class="sprite-fm-mono icon-name"></i>
            <span>[$86]</span>
            <i class="sprite-fm-mono sort-arrow"></i>
        </a>
        <a data-by="label" class="dropdown-item">
            <i class="sprite-fm-mono icon-label"></i>
            <span>[$17398]</span>
            <i class="sprite-fm-mono sort-arrow"></i>
        </a>
    </div>
</div>

<!-- Select Authenticator App tooltip launched on the Setup 2FA dialog -->
<div class="mobile auth-app-select-tooltip hidden">
    <i class="dropdown-white-arrow"></i>
    <div class="mobile explanation">[$19566]</div>
    <a class="mobile app-link authy" href="https://authy.com/download/" target="_blank" rel="noopener noreferrer">
        <span class="mobile app-link-icon"></span>
        <span class="mobile app-link-text">Authy</span>
        <i class="mobile app-arrow sprite-fm-mono icon-arrow-right"></i>
    </a>
    <a class="mobile app-link duomobile" href="https://duo.com/product/trusted-users/two-factor-authentication/duo-mobile" target="_blank" rel="noopener noreferrer">
        <span class="mobile app-link-icon"></span>
        <span class="mobile app-link-text">Duo Mobile</span>
        <i class="mobile app-arrow sprite-fm-mono icon-arrow-right"></i>
    </a>
    <a class="mobile app-link googleauthenticator" href="https://support.google.com/accounts/answer/1066447" target="_blank" rel="noopener noreferrer">
        <span class="mobile app-link-icon"></span>
        <span class="mobile app-link-text">Google Authenticator</span>
        <i class="mobile app-arrow sprite-fm-mono icon-arrow-right"></i>
    </a>
    <a class="mobile app-link microsoftauthenticator" href="https://www.microsoft.com/en-us/account/authenticator#getapp" target="_blank" rel="noopener noreferrer">
        <span class="mobile app-link-icon"></span>
        <span class="mobile app-link-text">Microsoft Authenticator</span>
        <i class="mobile app-arrow sprite-fm-mono icon-arrow-right"></i>
    </a>
</div>

<!-- left-click onboarding-like hint to tell users about double-click and right-click -->
<div class="dropdown body hint click-hint dropdown-arrow left-arrow high-top-pos-arrow short hidden">
    <i class="dropdown-white-arrow"></i>
    <div class="dropdown close-button"></div>
    <div class="dropdown content-block">
        <div class="dropdown hint-thumb left-click"></div>
        <div class="dropdown hint-info-block">
            <div class="dropdown hint-header">[$19856]</div>
            <div class="dropdown hint-info">[$19857]</div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<section class="mega-dialog-container">
    <div class="fm-dialog-overlay hidden"></div>

    <!-- Dialog: awaiting-confirmation -->
    <div class="mega-dialog dialog-template-graphic awaiting-confirmation hidden"
         role="dialog"
         aria-labelledby="awaiting-confirmation-title"
         aria-modal="true">

        <header class="dialog-top">
            <div class="graphic sprite-fm-illustration img-dialog-email"></div>
            <h2 id="awaiting-confirmation-title">[$7699]</h2>
        </header>

        <section class="content">
            <div class="content-block dialog-bottom">
                <p>[$7700]</p>
            </div>
        </section>
    </div>

    <!-- Dialog: reset-success -->
    <div class="mega-dialog dialog-template-graphic reset-success hidden"
         role="dialog"
         aria-labelledby="reset-success-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic sprite-fm-illustration img-dialog-email"></div>
            <h2 class="reset-success-title">[$pwd_link_sent]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="reset-email-success-txt"></div>
                <div class="reset-email-success-sub-txt">
                    [$no_email_try_again]<br>
                    [$contact_support_email]
                </div>
            </div>
        </section>

        <footer>
            <aside>
                <button class="mega-button positive ok-btn"><span>[$81]</span></button>
            </aside>
        </footer>
    </div>

    <!-- Dialog: reset-success-st2 -->
    <div class="mega-dialog dialog-template-main reset-success-st2 hidden"
         role="dialog"
         aria-labelledby="reset-success-st2-title"
         aria-modal="true">

        <header>
            <h2 id="reset-success-st2-title">[$1585]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="fm-dialog-top-text">
                    [$6217] <strong>[$6218]</strong>,  [$6219]
                </div>
                <div class="reset-small-txt">[$6220]</div>

                <div class="fm-account-input">
                    <input id="reset_success_st2_pass" type="password" value="" autocomplete="new-password" />
                </div>
                <div class="reset-pass-error">
                    [$6001]
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button negative close-account">
                    <span>[$6221]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: reset-success-st3 -->
    <div class="mega-dialog dialog-template-main reset-success-st3 hidden"
         role="dialog"
         aria-labelledby="reset-success-st3-title"
         aria-modal="true">

        <header>
            <h2 id="reset-success-st3-title">[$6841]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="fm-dialog-top-text">
                    <strong>[$17089]</strong>
                </div>
                <div class="reset-small-txt">[$6844]</div>
                <form>
                    <div>
                        <div class="radioOn" id="res5_div"><input type="radio" name="feedback-radio" id="res5" value="5"></div>
                        <label for="res5" class="radio-txt">[$6229]</label>
                    </div>
                    <div>
                        <div class="radioOff" id="res1_div"><input type="radio" name="feedback-radio" id="res1" value="1"></div>
                        <label for="res1" class="radio-txt">[$6845]</label>
                    </div>
                    <div>
                        <div class="radioOff" id="res2_div"><input type="radio" name="feedback-radio" id="res2" value="2"></div>
                        <label for="res2" class="radio-txt">[$6226]</label>
                    </div>
                    <div>
                        <div class="radioOff" id="res3_div"><input type="radio" name="feedback-radio" id="res3" value="3"></div>
                        <label for="res3" class="radio-txt">[$6227]</label>
                    </div>
                    <div>
                        <div class="radioOff" id="res4_div"><input type="radio" name="feedback-radio" id="res4" value="4"></div>
                        <label for="res4" class="radio-txt">[$23422]</label>
                    </div>
                    <div>
                        <div class="radioOff" id="res6_div"><input type="radio" name="feedback-radio" id="res6" value="6"></div>
                        <label for="res6" class="radio-txt">[$6847]</label>
                    </div>
                    <div>
                        <div class="radioOff" id="res7_div"><input type="radio" name="feedback-radio" id="res7" value="7"></div>
                        <label for="res7" class="radio-txt">[$2007]</label>
                    </div>
                </form>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button cancel">
                    <span>[$1597]</span>
                </button>
                <button class="mega-button positive feedback-submit">
                    <span>[$1694]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: account-reset-confirmation -->
    <div class="mega-dialog dialog-template-graphic account-reset-confirmation hidden"
         role="dialog"
         aria-labelledby="account-reset-confirmation-title"
         aria-modal="true">

        <header>
            <div class="graphic sprite-fm-illustration img-dialog-email"></div>
            <h2 id="account-reset-confirmation-title">[$735]</h2>
        </header>

        <section class="content">
            <div class="content-block dialog-bottom">
                <div>[$17805]</div>
            </div>
        </section>
    </div>

    <!-- Dialog: share-help -->
    <!-- Duplicated in staticdialog.html -->
    <div class="mega-dialog dialog-template-main share-help filled-input hidden"
         role="dialog"
         aria-labelledby="share-help-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="share-help-title">[$9104]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="instruction-message">
                    [$9103]
                </div>
                <div class="fm-dialog-new-folder-input">
                    <div class="fm-dialog-input-clear"></div>
                    <div class="fm-dialog-new-folder-pad decryption-key">
                        <input name="dialog-new-folder" type="text" placeholder="[$9038]" autofocus readonly />
                    </div>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive copy-to-clipboard">
                    <span>[$63]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: create-folder-dialog -->
    <div class="mega-dialog dialog-template-main create-folder-dialog filled-input hidden"
         role="dialog"
         aria-labelledby="create-folder-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="create-folder-dialog-title">[$68]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="create-folder-input-bl create-folder-wrapper">
                    <i class="item-type-icon icon-folder-24"></i>
                    <input name="dialog-new-folder" type="text" value="" placeholder="[$157]" autofocus />
                </div>
                <div class="whitespaces-input-warning">
                    <span>[$whitespaces_on_filename]</span>
                </div>
                <div class="duplicated-input-warning">
                    <span>[$23219]</span>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button create-folder-button-cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive fm-dialog-new-folder-button">
                    <span>[$455]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: create-file-dialog -->
    <div class="mega-dialog dialog-template-main create-file-dialog filled-input hidden"
         role="dialog"
         aria-labelledby="create-file-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="create-file-dialog-title">[$17505]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="create-folder-input-bl create-file-wrapper">
                    <i class="item-type-icon icon-text-24"></i>
                    <input name="dialog-new-file" type="text" value="" placeholder="[$17506]" autofocus />
                </div>
                <div class="whitespaces-input-warning">
                    <span>[$whitespaces_on_filename]</span>
                </div>
                <div class="duplicated-input-warning">
                    <span>[$17578]</span>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button create-file-button-cancel cancel-create-file">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive fm-dialog-new-file-button create-file">
                    <span>[$455]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: dlkey-dialog -->
    <div class="mega-dialog dialog-template-main dlkey-dialog hidden"
        role="dialog"
        aria-labelledby="dlkey-dialog-title"
        aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="dlkey-dialog-title">[$1026]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="instruction-message">
                    [$7945]
                </div>
                <div class="fm-dialog-new-folder-input">
                    <div class="fm-dialog-new-folder-pad decryption-key">
                        <input name="dialog-new-folder" type="text" placeholder="[$7971]" value="" autocomplete="disabled" />
                    </div>
                </div>
                <div class="dlkey-err hidden">[$9048]</div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive fm-dialog-new-folder-button">
                    <span>[$1027]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: sub-account-link-password -->
    <div class="mega-dialog dialog-template-tool sub-account-link-password user-management-dialog hidden"
         role="dialog"
         aria-labelledby="sub-account-link-password-title"
         aria-modal="true">

        <header>
            <div class="graphic sprite-fm-uni icon-mega-logo"></div>
            <h2 id="sub-account-link-password-title">[$18771]</h2>
            <p>[$18772]</p>
        </header>

        <section class="content">
            <div class="content-block">
                <input class="sub-m underlinedText withIcon" type="password" placeholder="[$18773]" data-wrapper-class="link-sub-user-pass" data-icon="sprite-fm-mono icon-lock">
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive decrypt-sub-user-link">
                    <span>[$1027]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: bus-pw-reset -->
    <div class="mega-dialog dialog-template-action user-management-dialog bus-pw-reset hidden"
         role="dialog"
         aria-labelledby="bus-pw-reset-title"
         aria-modal="true">

        <button class="close js-close hidden" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="bus-pw-reset-title">[$737]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="dialog-subtitle pass-reset-sub">
                    [$22077]
                </div>
                <div class="button-container big generate-pass-section">
                    <div class="notification-label">
                        [$22078]
                    </div>
                    <br />
                    <button class="mega-button large positive generate-pass-btn">
                        <span>[$22079]</span>
                    </button>
                </div>
                <div class="body-wrapper">
                    <div class="bus-pw-wrapper generated-pass-section hidden">
                        <div class="verification-container">
                            <b class="dark strong">[$22080]</b>&nbsp;
                            <div class="temp-pw selectable-txt"> ------- </div>
                            <div class="pass-visibility show-pw">
                                <i class="show-pw sprite-fm-mono icon-eye-reveal"></i>
                                <i class="hide-pw sprite-fm-mono icon-eye-hidden"></i>
                            </div>
                        </div>
                        <button class="mega-button positive copy-pass-reset">
                            <span>[$63]</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button large btn cancel-dlg">
                    <span>[$82]</span>
                </button>
                <button class="mega-button large positive btn apply-reset disabled">
                    <span>[$870]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: password-dialog -->
    <div class="mega-dialog dialog-template-main password-dialog hidden"
         role="dialog"
         aria-labelledby="password-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="password-dialog-title">[$9070]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="instruction-message">
                    [$9071]<br>
                    [$9072]
                </div>
                <input id="password-decrypt-input" class="underlinedText withIcon" type="password" placeholder="[$9073]" value=""
                       autocomplete="new-password" data-icon="sprite-fm-mono icon-lock-filled"/>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive fm-dialog-new-folder-button decrypt-link-button">
                    <span class="decrypt-text">[$1027]</span>
                    <div class="hidden decryption-in-progress">
                        <i class="sprite-fm-theme icon-loading-spinner"></i>
                    </div>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: registration-page-success -->
    <div class="mega-dialog dialog-template-graphic registration-success registration-page-success hidden"
         role="dialog"
         aria-labelledby="registration-page-success-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="graphic sprite-fm-illustration img-dialog-groupchat reg-success-icon-chat hidden"></i>
            <i class="graphic sprite-fm-illustration img-dialog-email reg-success-icon"></i>
            <h2 id="registration-page-success-title" class="reg-success-normal">[$8688]</h2>
            <div class="reg-success-special">
                <h2 class="reg-success-txt chat-header">[$20647]</h2>
            </div>
        </header>

        <section class="content">
            <div class="content-block dialog-bottom">
                <div class="reg-success-normal">
                    <div>[$217]</div>
                </div>
                <div class="reg-success-special">
                    <div class="reg-success-txt">[$217]</div>
                    <div class="reg-resend-email-txt"></div>
                    <div class="reg-success-txt chat-message">[$20648]</div>
                    <div class="reg-resend-email hidden">
                        <div class="reg-resend-input-bl">
                            <input type="text" value="" maxlength="190" />
                            <div class="reg-resend-email-meg">[$1100]</div>
                        </div>
                        <div class="reg-resend-button-bl">
                            <button class="resend-email-button">[$8744]</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <footer class="hidden">
            <aside>
                <div>[$22900]</div>
            </aside>
        </footer>
    </div>

    <!-- Dialog: rename-dialog -->
    <div class="mega-dialog dialog-template-main rename-dialog hidden"
         role="dialog"
         aria-labelledby="rename-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="rename-dialog-title">[$425]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="rename-input-bl">
                    <i class="input-icon"></i>
                    <input name="dialog-rename" type="text" value="[$157]" />
                </div>
                <div class="whitespaces-input-warning">
                    <span>[$whitespaces_on_filename]</span>
                </div>
                <div class="duplicated-input-warning">
                    <span>[$17578]</span>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button rename-dialog-button cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive rename-dialog-button rename">
                    <span>[$61]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: fm-picker-dialog -->
    <div class="mega-dialog dialog-template-tool fm-picker-dialog hidden"
         role="dialog"
         aria-labelledby="fm-picker-dialog-title"
         aria-modal="true">

        <section class="left-panel">
            <!-- Tab Sections -->
            <div class="right-pane fm-picker-dialog-tree-panel quick-access">
                <button
                    class="mega-component fm-picker-dialog-button text-icon menu-item nav-elem full-width active simpletip"
                    data-section="quick-access"
                    data-simpletip="[$frequent_access]"
                    data-simpletipposition="right"
                    data-simpletip-class="picker-dialog-simpletip"
                    data-simpletipoffset="-12"
                >
                    <i class="sprite-fm-mono icon-clock-thin-outline left-icon icon-size-24"></i>
                    <div class="text-box-wrapper sk-elm">
                        <span class="primary-text">[$frequent_access]</span>
                    </div>
                </button>
            </div>
            <div class="right-pane fm-picker-dialog-tree-panel cloud-drive">
                <button
                    class="mega-component fm-picker-dialog-button text-icon menu-item nav-elem full-width active simpletip"
                    data-section="cloud-drive"
                    data-simpletip="[$1687]"
                    data-simpletipposition="right"
                    data-simpletip-class="picker-dialog-simpletip"
                    data-simpletipoffset="-12"
                >
                    <i class="sprite-fm-mono icon-cloud-thin-outline left-icon icon-size-24"></i>
                    <div class="text-box-wrapper sk-elm">
                        <span class="primary-text">[$1687]</span>
                    </div>
                </button>
            </div>
            <div class="right-pane fm-picker-dialog-tree-panel s4">
                <button
                    class="mega-component fm-picker-dialog-button text-icon menu-item nav-elem full-width simpletip"
                    data-section="s4"
                    data-simpletip="[$obj_storage]"
                    data-simpletipposition="right"
                    data-simpletip-class="picker-dialog-simpletip"
                    data-simpletipoffset="-12"
                >
                    <i class="sprite-fm-mono icon-bucket-triangle-thin-outline left-icon icon-size-24"></i>
                    <div class="text-box-wrapper sk-elm">
                        <span class="primary-text">[$obj_storage]</span>
                    </div>
                </button>
            </div>
            <div class="right-pane fm-picker-dialog-tree-panel shared-with-me">
                <button
                    class="mega-component fm-picker-dialog-button text-icon menu-item nav-elem full-width simpletip"
                    data-section="shared-with-me"
                    data-simpletip="[$5542]"
                    data-simpletipposition="right"
                    data-simpletip-class="picker-dialog-simpletip"
                    data-simpletipoffset="-12"
                >
                    <i class="sprite-fm-mono icon-folder-users-thin-outline left-icon icon-size-24"></i>
                    <div class="text-box-wrapper sk-elm">
                        <span class="primary-text">[$5542]</span>
                    </div>
                </button>
            </div>
            <div class="right-pane fm-picker-dialog-tree-panel conversations">
                <button
                    class="mega-component fm-picker-dialog-button text-icon menu-item nav-elem full-width simpletip"
                    data-section="conversations"
                    data-simpletip="[$7997]"
                    data-simpletipposition="right"
                    data-simpletip-class="picker-dialog-simpletip"
                    data-simpletipoffset="-12"
                >
                    <i class="sprite-fm-mono icon-message-chat-circle-thin left-icon icon-size-24"></i>
                    <div class="text-box-wrapper sk-elm">
                        <span class="primary-text">[$7997]</span>
                    </div>
                </button>
            </div>

            <div class="fm-picker-notagain mega-component mega-checkbox hidden">
                <div class="checkbox-wrapper">
                    <input type="checkbox" id="fm-picker-notagain" class="notagain" />
                </div>
                <label for="fm-picker-notagain" class="checkbox-action">[$229]</label>
            </div>
            <!-- END Tab Sections -->
        </section>
        <section class="content">
            <!-- Header container -->
            <div class="content-block header">
                <h2 id="fm-picker-dialog-title">[$63]</h2>
                <div class="search-bar summary-input placeholder mega-input pm box-style with-icon">
                    <i class="sprite-fm-mono icon-search-light-outline left-icon"></i>
                    <input class="form-element pmText no-title-top clearButton megaInputs" type="text" placeholder="[$dlg_search_cd]">
                    <i class="sprite-fm-mono icon-dialog-close-thin clear-input search-icon-reset hidden"></i>
                    <div class="save-input-error hidden">
                        <i class="sprite-fm-mono icon-alert-triangle-thin-outline"></i>
                        <div class="error-text"></div>
                    </div>
                </div>
            </div>
            <!-- END header container -->

            <!--Summary container-->
            <div class="content-block sort">
                <div class="sort-height">
                    <div class="fm-picker-dialog-panel-arrows">
                        <i class="sprite-fm-mono icon-arrow-up-thin-outline"></i>
                    </div>
                    <span class="item-names">[$86]</span>
                </div>
                <div class="search-collapse-bar summary-input mega-input pm box-style with-icon collapsed hidden">
                    <i class="sprite-fm-mono icon-search-light-outline left-icon search-icon-expand"></i>
                    <input class="form-element pmText no-title-top clearButton megaInputs" type="text">
                    <i class="sprite-fm-mono icon-dialog-close-thin clear-input search-icon-collapse hidden"></i>
                </div>
            </div>

            <!--Folder container-->
            <div class="content-block folder-container">
                <div class="dialog-tree-panel-scroll">
                    <div class="dialog-content-block"></div>
                </div>
                <div class="dialog-empty-block quick-access">
                    <div class="dialog-empty-pad">
                        <div class="image mob-px-6">
                            <i class="glass-clock"></i>
                        </div>
                        <div class="title mob-px-6">
                            <h1>[$dlg_empty_title_frequents]</h1>
                        </div>
                        <div class="subtitle">
                            <span>[$dlg_empty_text_frequents]</span>
                        </div>
                    </div>
                </div>
                <div class="dialog-empty-block cloud-drive">
                    <div class="dialog-empty-pad">
                        <div class="image mob-px-6">
                            <i class="glass-cloud-circle"></i>
                        </div>
                        <div class="title mob-px-6">
                            <h1>[$20461]</h1>
                        </div>
                        <div class="subtitle">
                            <span>[$move_dlg_empty_cd]</span>
                        </div>
                    </div>
                </div>
                <div class="dialog-empty-block s4">
                    <div class="dialog-empty-pad">
                        <div class="image mob-px-6">
                            <i class="glass-object-bucket"></i>
                        </div>
                        <div class="title mob-px-6">
                            <h1>[$dlg_empty_title_s4]</h1>
                        </div>
                        <div class="subtitle">
                            <span>[$move_dlg_empty_s4]</span>
                        </div>
                    </div>
                </div>
                <div class="dialog-empty-block shared-with-me">
                    <div class="dialog-empty-pad">
                        <div class="image mob-px-6">
                            <i class="glass-shared-folder"></i>
                        </div>
                        <div class="title mob-px-6">
                            <h1>[$6871]</h1>
                        </div>
                        <div class="subtitle">
                            <span>[$dlg_empty_text_share]</span>
                        </div>
                    </div>
                </div>
                <div class="dialog-empty-block conversations">
                    <div class="dialog-empty-pad">
                        <div class="image mob-px-6">
                            <i class="glass-contact"></i>
                        </div>
                        <div class="title mob-px-6">
                            <h1>[$5737]</h1>
                        </div>
                        <div class="subtitle hidden"><span></span></div>
                    </div>
                </div>
                <div class="dialog-empty-block search">
                    <div class="dialog-empty-pad">
                        <div class="image mob-px-6">
                            <i class="glass-details"></i>
                        </div>
                        <div class="title mob-px-6">
                            <h1>[$no_search_results]</h1>
                        </div>
                        <div class="subtitle">
                            <span>[$search_again]</span>
                        </div>
                    </div>
                </div>
            </div><!--END folder container-->

            <div class="content-block summary-container">
                <div class="summary-row">
                    <div class="summary-item summary-title summary-target-title">[$item_target]</div>
                    <div class="summary-item summary-input placeholder">
                        <div class="fm-picker-breadcrumbs link-row">
                            <div class="crumb-overflow-link dropdown">
                                <a class="breadcrumb-dropdown-link">
                                    <i class="menu-icon sprite-fm-mono icon-more-horizontal-thin-outline icon16"></i>
                                </a>
                                <i class="sprite-fm-mono icon-chevron-right-thin-outline icon16"></i>
                            </div>
                            <div class="fm-breadcrumbs-block"></div>
                            <div class="breadcrumb-dropdown"></div>
                            <button class="mega-component nav-elem icon-only crumb-clear-sel hidden">
                                <i class="sprite-fm-mono icon-dialog-close-thin left-icon"></i>
                            </button>
                        </div>
                    </div>
                    <div class="summary-item summary-instructions">
                        <i class="sprite-fm-mono icon-help-circle-thin-outline"></i>
                        <div class="instruction"></div>
                    </div>
                </div>
                <div class="summary-error hidden">
                    <i class="sprite-fm-mono icon-alert-triangle-thin-outline"></i>
                    <div class="error-text"></div>
                </div>
                <div class="summary-conversations hidden">
                    <div class="summary-item summary-title summary-target-title">[$chat_target]</div>
                    <div class="summary-item summary-input placeholder"></div>
                    <div class="summary-row">
                        <div class="summary-item summary-instructions">
                            <div class="instruction">[$send_dlg_instruction_chat]</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-block footer-container">
                <div class="select-wrapper">
                    <div class="permissions hidden">
                        <i class="permission sprite-fm-mono icon-eye-reveal1"></i>
                        <span>[$7534]</span>
                        <i class="sprite-fm-mono icon-chevron-down-thin-outline select-arrow"></i>
                    </div>
                    <button class="mega-component nav-elem text-only dialog-newfolder-button">
                        <div class="text-box-wrapper sk-elm">
                            <span class="primary-text">[$create_folder]</span>
                        </div>
                    </button>
                    <button class="mega-component nav-elem text-only dialog-newgroup-button">
                        <div class="text-box-wrapper sk-elm">
                            <span class="primary-text">[$19483]</span>
                        </div>
                    </button>
                </div>
                <div>
                    <button class="mega-component nav-elem normal button action secondary dialog-cancel-button">
                        <div class="text-box-wrapper sk-elm">
                            <span class="primary-text">[$82]</span>
                        </div>
                    </button>
                    <button class="mega-component nav-elem normal button action dialog-picker-button">
                        <div class="text-box-wrapper sk-elm">
                            <span class="primary-text">[$16176]</span>
                        </div>
                    </button>
                </div>
            </div>

            <div class="fm-picker-notagain mega-component mega-checkbox hidden">
                <div class="checkbox-wrapper">
                    <input type="checkbox" id="fm-picker-notagain1" class="notagain" />
                </div>
                <label for="fm-picker-notagain1" class="checkbox-action">[$229]</label>
            </div>
        </section>
    </div><!--END fm-picker-dialog-->

    <!-- Dialog: set-password-dialog -->
    <div class="mega-dialog dialog-template-tool set-password-dialog hidden"
         role="dialog"
         aria-labelledby="set-password-dialog-title"
         aria-modal="true">

        <header>
            <h2 id="set-password-dialog-title">[$17454]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="set-password-dialog existing-pass hidden">
                    <div class="set-password-dialog existing-tip">
                        [$23669]
                    </div>
                    <div class="set-password-dialog existing-input">
                        <div class="set-password-dialog existing-input-wrap">
                            <i class="sprite-fm-mono icon-eye-reveal"></i>
                            <input type="password" value="" readonly>
                        </div>
                        <button class="mega-button positive copy">
                            <span>[$63]</span>
                        </button>
                    </div>
                </div>
                <div class="set-password-dialog pass-wrapper">
                    <input class="underlinedText with-icon enter-pass" type="password" placeholder="[$9074]" data-icon="sprite-fm-mono icon-lock" />
                    <div class="set-password-dialog strength"></div>
                    <div class="retype">
                        <input class="underlinedText with-icon confirm-pass" type="password" placeholder="[$870]" data-icon="sprite-fm-mono icon-lock-2" />
                    </div>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive confirm">
                    <span>[$870]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: avatar-dialog -->
    <div class="mega-dialog dialog-template-main avatar-dialog hidden"
         role="dialog"
         aria-labelledby="avatar-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="avatar-dialog-title">[$993]</h2>
        </header>

        <section class="content">
            <div class="content-block avatar-body alt-background"></div>
        </section>

        <footer>
            <div class="footer-container avatar-footer"></div>
        </footer>
    </div>

    <!-- Dialog: push-settings-dialog -->
    <div class="mega-dialog dialog-template-tool push-settings-dialog hidden"
         role="dialog"
         aria-labelledby="push-settings-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="push-settings-dialog-title">[$dnd_mute_title]</h2>
            <p>[$22015]</p>
        </header>

        <section class="content">
            <div class="content-block">
                <label class="radio-txt">
                    [$22012]
                    <div class="custom-radio small green-active radioOff">
                        <input
                               type="radio"
                               name="push-settings-radio"
                               value="30"
                               class="custom-radio" />
                    </div>
                </label>
                <label class="radio-txt">
                    [$19048]
                    <div class="custom-radio small green-active radioOff">
                        <input
                               type="radio"
                               name="push-settings-radio"
                               value="60"
                               class="custom-radio" />
                    </div>
                </label>
                <label class="radio-txt">
                    [$22013]
                    <div class="custom-radio small green-active radioOff">
                        <input
                               type="radio"
                               name="push-settings-radio"
                               value="360"
                               class="custom-radio" />
                    </div>
                </label>
                <label class="radio-txt">
                    [$22014]
                    <div class="custom-radio small green-active radioOff">
                        <input
                               type="radio"
                               name="push-settings-radio"
                               value="1440"
                               class="custom-radio" />
                    </div>
                </label>
                <label class="radio-txt morning-option">
                    <span>
                        <!-- // ... -->
                    </span>
                    <div class="custom-radio small green-active radioOn">
                        <input
                               type="radio"
                               name="push-settings-radio"
                               value="0"
                               class="custom-radio radioOn"
                               checked />
                    </div>
                </label>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button push-settings-close">
                    <span>
                        [$82]
                    </span>
                </button>
                <button class="mega-button positive push-settings-done">
                    <span>
                        [$726]
                    </span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: properties-dialog -->
    <div class="mega-dialog properties-dialog multiple shared hidden"
         role="dialog"
         aria-labelledby="properties-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="properties-dialog-title">[$892]</h2>
        </header>

        <div class="properties-body">
            <div class="properties-context-menu">
                <div class="properties-context-arrow"></div>
                <div class="properties-context-item away">
                    <div class="properties-contact-status"></div>
                    <span></span>
                </div>
                <div class="properties-context-item online">
                    <div class="properties-contact-status"></div>
                    <span></span>
                </div>
                <div class="properties-context-item show-more">
                    <span></span>
                </div>

                <div class="context-menu-divider"></div>
                <div class="properties-context-item properties-share-options">
                    <div class="properties-share-icon"></div>
                    <span>[$6849]</span>
                </div>
            </div>
            <span class="file-status-icon"></span>
            <i class="taken-down-icon sprite-fm-mono icon-takedown"></i>
            <div class="dialog versioning-indicator">
                <i class="small-icon icons-sprite grey-clock"></i>
            </div>
            <span class="link-icon"></span>
            <div class="properties-elements-counter">
                <span></span>
                <i class="read-only sprite-fm-mono icon-read-only"></i>
                <i class="read-and-write sprite-fm-mono icon-permissions-write"></i>
                <i class="full-access sprite-fm-mono icon-star"></i>
            </div>
            <div class="properties-file-icon">
            </div>
            <div class="properties-txt-wrapper">
                <div class="properties-txt-pad selectable-txt">
                    <div class="properties-name-container">
                    <div class="properties-small-gray">[$86]</div>
                    <div class="properties-name-block">
                        <div class="propreties-dark-txt">Filename.ext</div>
                    </div>
                    </div>
                    <div class="properties-breadcrumb">
                        <div class="properties-small-gray">Path:</div>
                        <div class="fm-breadcrumbs-wrapper info">
                            <div class="crumb-overflow-link dropdown">
                                <a class="breadcrumb-dropdown-link info-dlg">
                                    <i class="menu-icon sprite-fm-mono icon-options icon16"></i>
                                </a>
                                <i class="sprite-fm-mono icon-arrow-right icon16"></i>
                            </div>
                            <div class="fm-breadcrumbs-block"></div>
                            <div class="breadcrumb-dropdown"></div>
                        </div>
                    </div>
                    <div class="properties-float-bl">
                        <span class="properties-small-gray">[$87]</span>
                        <span class="propreties-dark-txt">100kb</span>
                    </div>
                    <div class="properties-float-bl second">
                        <span class="properties-small-gray">[$17150]</span>
                        <a class="propreties-dark-txt">10 versions</a>
                    </div>
                    <div class="properties-small-gray">[$86]</div>
                    <div class="propreties-dark-txt">Filename.ext</div>
                </div>
            </div>
            <div class="properties-previous-versions">
                <div class="grid-scrolling-table">
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>

    <!-- Dialog: bottom-pages-dialog -->
    <div class="mega-dialog dialog-template-main bottom-pages-dialog hidden"
         role="dialog"
         aria-labelledby="bottom-pages-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="bottom-pages-dialog-title"></h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="bp-body">
                    <div class="bp-main"></div>
                </div>
            </div>
        </section>

        <footer class="alt-background">
            <div class="footer-container">
                <button class="mega-button fm-bp-close">
                    <span>[$148]</span>
                </button>
                <button class="mega-button fm-bp-cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive fm-bp-agree">
                    <span>[$1037]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: languages-dialog -->
    <!-- Duplicated in staticdialog.html -->
    <div class="mega-dialog dialog-template-main languages-dialog hidden"
         role="dialog"
         aria-labelledby="languages-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="languages-dialog-title">[$1038]</h2>
        </header>

        <section class="content">
            <div id="language_menu_options" class="content-block">
                <div class="tier-one-languages"></div>
                <div class="show-more-languages">
                    <div class="show-more-text">[$7657]</div>
                    <div class="bar">
                        <div></div>
                    </div>
                    <div class="round-arrow">
                        <span></span>
                    </div>
                </div>
                <div class="tier-two-languages"></div>
                <a class="language-template nlanguage-lnk" data-lang-code="">
                    <span class="native-language-name"></span>
                    <span class="beta hidden">BETA</span>
                </a>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive fm-languages-save">
                    <span>[$776]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: download-dialog -->
    <!-- No longer used: for Flash-based downloads -->
    <div class="mega-dialog dialog-template-message download-dialog hidden"
         role="dialog"
         aria-labelledby="download-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="graphic sprite-fm-uni icon-success"></i>
            <div>
                <h3 id="download-dialog-title">[$239]</h3>
                <p>
                    [$240]
                    <a href="https://www.google.com/chrome" class="download-chrome-lnk" target="_blank" rel="noopener noreferrer">
                        <i class="sprite-fm-uni icon-chrome"></i>
                        <span>[$242]</span>
                    </a>
                </p>
            </div>
        </header>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive">
                    <div class="download-save-your-file">
                    </div>
                    <span>[$241]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: add-user-popup -->
    <div class="mega-dialog dialog-template-action add-user-popup hidden"
         role="dialog"
         aria-labelledby="meeting-finished-title"
         aria-modal="true">

        <i class="dropdown-white-arrow"></i>

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="add-user-popup-title">[$71]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="multiple-input">
                    <i class="sprite-fm-mono icon-email-filled"></i>
                    <form autocomplete="disabled">
                        <input type="text" class="add-contact-multiple-input" id="add-user-dialog-input" name="" />
                    </form>
                    <div class="clear"></div>
                </div>
                <div class="multiple-input-warning">
                    <span>[$5918]</span>
                </div>
                <div class="hidden-textarea-info"><span>[$19109]</span></div>

                <div class="add-user-notification mega-textarea">
                    <div class="add-user-textarea textarea-scroll">
                        <textarea placeholder="[$19110]"></textarea>
                    </div>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive large add-user-popup-button">
                    <span></span>
                </button>

                <div class="hidden-achievement-info">
                    <div class="hidden-achievement-cell">
                        <i class="sprite-fm-illustration img-dialogs-achievements"></i>
                    </div>
                    <div class="hidden-achievement-cell">
                        <div class="big-txt">
                            [$19123]
                        </div>
                        <div class="small-txt">
                            [$19124]
                        </div>
                    </div>
                </div>
            </div>
            <aside>
                <i class="sprite-fm-mono icon-link"></i>
                <span>[$19111]</span>
            </aside>
        </footer>
    </div>

    <!-- Dialog: contact-info -->
    <div class="mega-dialog dialog-template-graphic contact-info hidden"
         role="dialog"
         aria-labelledby="contact-info-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic sprite-fm-illustration img-dialog-email">
            </div>
            <h2 id="contact-info-title" class="contact-info-title"></h2>
        </header>

        <section>
            <div class="content-block">
                <div class="new-contact-info">
                    <span></span> [$19127]
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive ok">
                    <span>[$81]</span>
                </button>
            </div>
        </footer>
    </div>

    <!--Share Dialog-->
    <div class="mega-dialog dialog-template-main share-dialog hidden"
         role="dialog"
         aria-labelledby="share-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="share-dialog-title">[$5631]</h2>
        </header>

        <section class="content">
            <div class="content-block share-dialog-top">
                <div class="share-dialog-top-body">
                    <div class="share-dialog-shared-item">
                        <i class="item-type-icon-90"></i>
                        <div class="share-dialog-folder-info-block">
                            <div class="share-dialog-folder-name"></div>
                            <div class="share-dialog-folder-info"></div>
                        </div>
                    </div>
                    <div class="share-dialog-copy-link-wrapper">
                        <button class="mega-button positive copy-link">
                            <span>[$17835]</span>
                        </button>
                    </div>
                    <div class="share-dialog-copy-link-msg hidden">
                        <div class="copy-link-icon"></div>
                        <div class="copy-link-txt">[$23705]</div>
                    </div>
                </div>
            </div>

            <div class="content-block share-dialog-bottom">
                <div class="share-dialog-invite-container">
                    <div class="share-dialog-invite-background">
                        <div class="contact-search-block empty">
                            <div class="selected-contacts-container">
                                <div class="contact-selected-item-input">
                                    <input type="text" name="contact-search-input" autocomplete="off" placeholder="[$share_add_contact_placeholder]" class="megaInputs contact-search-input">
                                </div>
                            </div>
                            <div class="contact-dropdown-container">
                                <div class="contact-dropdown-container-wrapper"></div>
                            </div>

                            <template class="contact-selected-template">
                                <div class="contact-selected-item" data-contact-handle="">
                                    <div class="avatar-container"></div>
                                    <div class="selected-contact-name"></div>
                                    <button class="remove-contact-button" aria-label="Remove contact">
                                        <i class="sprite-fm-mono icon-dialog-close"></i>
                                    </button>
                                </div>
                            </template>
                            <template class="contact-item-template">
                                <div class="contact-item" data-contact-handle="">
                                    <div class="avatar-container"></div>
                                    <div class="contact-name"></div>
                                    <div class="contact-email"></div>
                                </div>
                            </template>
                        </div>
                        <div class="permissions-dropdown-button">
                            <div class="button-option read-only">[$55]</div>
                            <div class="button-option read-and-write">[$56]</div>
                            <div class="button-option full-access">[$57]</div>
                            <div class="down-arrow sprite-fm-mono icon-dropdown"></div>

                            <div class="permissions-dropdown-container hidden">
                                <div class="dropdown-option" data-attr-permission="read-only">
                                    <div class="title">[$55]</div>
                                    <div class="description">[$share_permission_readonly_description]</div>
                                    <div class="selected-check sprite-fm-mono-after icon-check-after"></div>
                                </div>
                                <div class="dropdown-option" data-attr-permission="read-and-write">
                                    <div class="title">[$56]</div>
                                    <div class="description">[$share_permission_readwrite_description]</div>
                                    <div class="selected-check sprite-fm-mono-after icon-check-after"></div>
                                </div>
                                <div class="dropdown-option" data-attr-permission="full-access">
                                    <div class="title">[$57]</div>
                                    <div class="description">[$share_permission_fullaccess_description]</div>
                                    <div class="selected-check sprite-fm-mono-after icon-check-after"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button class="mega-button positive invite-contact-button disabled">
                        <span>[$60]</span>
                    </button>

                    <div class="error-message"></div>
                    <div class="mega-textarea invite-note">
                        <div class="textarea-scroll">
                            <textarea
                                id="share-dialog-invite-note"
                                placeholder="[$share_add_note_placeholder]"
                                maxlength="800"
                                rows="1"
                                class="invite-note-textarea"
                            ></textarea>
                        </div>
                    </div>
                </div>

                <div class="share-dialog-bottom-body">
                    <div class="mega-input-dropdown share-dialog-permissions-menu hidden">
                        <div class="option full-access">
                            <i class="permission-icon sprite-fm-mono icon-star"></i>
                            <span class="permission-item-text">[$57]</span>
                            <i class="tick sprite-fm-uni icon-check"></i>
                        </div>
                        <div class="option read-and-write">
                            <i class="permission-icon sprite-fm-mono icon-permissions-write"></i>
                            <span class="permission-item-text">[$5610]</span>
                            <i class="tick sprite-fm-uni icon-check"></i>
                        </div>
                        <div class="option read-only">
                            <i class="permission-icon sprite-fm-mono icon-read-only"></i>
                            <span class="permission-item-text">[$55]</span>
                            <i class="tick sprite-fm-uni icon-check"></i>
                        </div>
                    </div>
                    <div class="share-dialog-access-title">[$23706]</div>
                    <div class="mega-banner body warning-template contact-verify-notification"><span></span></div>
                    <div class="mega-banner body warning-template contact-verify-warning">[$undec_outshare_warning_banner]</div>
                    <div class="share-dialog-access-list"></div>
                    <div class="mega-banner body warning-template"></div>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container alt-background">
                <button class="mega-button remove-share disabled hidden">
                    <span>[$23737]</span>
                </button>
                <button class="mega-button positive done-share hidden">
                    <span>[$726]</span>
                </button>
            </div>
            <div class="share-dialog-bottom-msg"><span class="v-hidden">[$23708]</span></div>
        </footer>
    </div>

    <!-- Share access list dialog -->
    <div class="mega-dialog dialog-template-main share-access-contacts-dialog hidden"
         role="dialog"
         aria-modal="true">
        <button class="close js-button-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>
        <header>
            <h2><i class="sprite-fm-mono icon-arrow-left-thin"></i>[$23706]</h2>
        </header>
        <section>
            <div class="share-dialog-access-list"></div>
        </section>
    </div>

    <!-- Dialog: partial dialog used by the share-add-dialog in React-->
    <template class="share-add-dialog-bottom-template">
        <div class="share-add-dialog-bottom">
            <div class="multiple-input">
                <i class="sprite-fm-mono icon-email"></i>
                <div>
                    <input type="text" class="share-multiple-input" id="share-multiple-input" name=""/>
                </div>
            </div>
            <div class="multiple-input-warning">
                <span>[$5918]</span>
            </div>
            <div class="share-message mega-textarea hidden">
                <div class="share-message-textarea textarea-scroll">
                    <textarea placeholder="[$19110]"></textarea>
                </div>
            </div>
            <div class="share-add-dialog-buttons-wrapper">
                <button class="mega-button cancel-add-share">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive add-share disabled">
                    <span>[$726]</span>
                </button>
            </div>
        </div>
    </template>

    <div class="mega-dialog dialog-template-main share-with-unverified-contacts hidden"
         role="dialog"
         aria-modal="true">

        <button class="close js-button-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2>[$share_unverified_dialog_title]</h2>
        </header>

        <section>
            <div class="content-block">
                <p class="sub-title-txt">[$share_unverified_dialog_desc]</p>
                <div class="contact-items"></div>
            </div>
            <template class="contact-item-template">
                <div class="contact-item" data-contact-handle="">
                    <div class="avatar-container"></div>
                    <div class="contact-name"></div>
                    <div class="verify-credentials-button">[$verify_credentials_button]</div>
                    <div class="share-without-verifying-button">[$share_without_verifying_button]</div>
                </div>
            </template>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button share-all-without-verifying-button">
                    <span>[$share_to_all_without_verifying_button]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: fingerprint-dialog -->
    <div class="mega-dialog dialog-template-main fingerprint-dialog hidden"
         role="dialog"
         aria-labelledby="fingerprint-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="business-subuser-confirm"></div>
            <h2 id="fingerprint-dialog-title">[$verify_credentials]</h2>
        </header>

        <section>
            <div class="content-block">
                <p class="sub-title-txt">
                    [$contact_ver_dialog_content]
                </p>

                <div class="fingerprint-mid-info">
                    <div class="fingerprint-avatar"></div>
                    <div class="fingerprint-contact-info selectable-txt">
                        <div class="contact-details-user-name"></div>
                        <div class="contact-details-email"></div>
                    </div>
                    <div class="fingerprint-code">
                        <div class="contact-fingerprint-title">
                            [$6780]

                        </div>
                        <div class="fingerprint-txt selectable-txt"><span>121E</span><span>888D</span><span>D500</span><span>583D</span><span>715E</span></div>
                        <div class="fingerprint-txt selectable-txt"><span>121E</span><span>888D</span><span>D500</span><span>583D</span><span>715E</span></div>
                    </div>
                </div>
                <div class="fingerprint-mid-txt">
                    [$contact_ver_dialog_banner]
                </div>
                <div class="fingerprint-bott-txt">
                    <div class="fingerprint-bott-header">
                        [$6782]
                    </div>
                    <div class="fingerprint-txt selectable-txt">
                        <span>121E</span><span>888D</span><span>D500</span><span>583D</span><span>715E</span><span>121E</span><span>888D</span><span>D500</span><span>583D</span><span>715E</span>
                    </div>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button dialog-skip-button">
                    <span>[$1379]</span>
                </button>
                <button class="mega-button positive dialog-approve-button">
                    <span>[$mark_as_verified]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: pro-login-dialog -->
    <div class="mega-dialog dialog-template-main top-login-popup sign pro-login-dialog login hidden"
         role="dialog"
         aria-labelledby="pro-login-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h1 id="pro-login-dialog-title">[$190]</h1>
        </header>

        <section class="content">
            <div class="content-block">
                <form class="account dialog-login-form">
                    <div class="fields">
                        <input class="underlinedText input-email" type="text" name="login-name3" id="login-name3" placeholder="[$195]" maxlength="190" />
                        <input class="underlinedText input-password" type="password" name="login-password3" id="login-password3" placeholder="[$909]" />
                        <div class="login-page-forgot-bl">
                            <a class="top-login-forgot-pass" tabindex="-1">
                                <span>[$1934]</span>
                            </a>
                            <div class="clear"></div>
                        </div>
                    </div>
                </form>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <div class="account checkbox-block">
                    <div class="login-check checkboxOn checkbox">
                        <input class="checkboxOn" type="checkbox" name="login-check3" id="login-check3" checked="checked">
                    </div>
                    <label class="radio-txt">[$192]</label>
                </div>
                <button class="mega-button positive inline top-dialog-login-button" tabindex="0" type="button">
                    <span>[$16345]</span>
                </button>
            </div>

            <aside class="hidden">
                <p>[$20635]</p>
            </aside>
        </footer>
    </div>

    <!-- Dialog: pro-register-dialog -->
    <div class="mega-dialog dialog-template-action top-login-popup sign pro-register-dialog hidden"
         role="dialog"
         aria-labelledby="meeting-finished-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic wide sprite-fm-illustration-wide registration"></div>
            <h2 id="pro-register-dialog-title">[$968]</h2>
            <p></p>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="fm-dialog-body hidden"></div>
                <form class="account dialog-register-form">
                    <div class="register-side-pane content">
                        <div class="account half-sized-block l">
                            <input class="underlinedText f-name halfSize-l" type="text" name="register-name" id="register-firstname" placeholder="[$7342]" maxlength="40" />
                            <input class="underlinedText l-name halfSize-r" type="text" name="register-familyname" id="register-lastname" placeholder="[$7345]" maxlength="40" />
                        </div>
                        <div class="account half-sized-block r">
                            <input class="underlinedText email" type="text" name="rigister-email" id="register-email" placeholder="[$95]" maxlength="190" />
                        </div>
                        <div class="clear"></div>
                        <div class="account half-sized-block l full-sized-error">
                            <input class="underlinedText strengthChecker pass" type="password" name="register-password" id="register-password" placeholder="[$909]" autocomplete="new-password" />
                        </div>
                        <div class="account half-sized-block r">
                            <input class="underlinedText confirm-pass" type="password" name="register-password2" id="register-password2" placeholder="[$1114]" autocomplete="new-password" />
                        </div>
                        <div class="clear"></div>
                        <div class="account checkbox-block register">
                            <div class="understand-check checkboxOff checkbox">
                                <input class="checkboxOff" type="checkbox" checked="">
                            </div>
                            <label class="radio-txt e2e-check">[$20975.b]</label>
                            <div class="clear"></div>
                        </div>
                        <div class="account checkbox-block register">
                            <div class="register-check checkboxOff checkbox">
                                <input class="checkboxOff" type="checkbox" checked="">
                            </div>
                            <label class="radio-txt terms-check">[$208.g]</label>
                            <div class="clear"></div>
                        </div>
                        <div class="account checkbox-block register privacy-checkbox-block hidden">
                            <div class="privacy-check checkboxOff checkbox">
                                <input class="checkboxOff" type="checkbox" checked="">
                            </div>
                            <label class="radio-txt privacy-label">[$accept_privacy_policy]</label>
                            <div class="clear"></div>
                        </div>
                    </div>
                </form>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive large" type="button">
                    <span>[$1108]</span>
                </button>
            </div>

            <aside class="with-condition">
                <div class="login-text">[$5585] <a>[$171]</a></div>
            </aside>
        </footer>
    </div>

    <!-- Dialog: feedback-dialog -->
    <!-- Overlay -->
    <!-- TODO: Make this an overlay and not a dialog -->
    <div class="mega-dialog fm-mega-dialog feedback-dialog hidden theme-dark-forced"
         role="dialog"
         aria-labelledby="feedback-dialog-title"
         aria-modal="true">

        <div class="overlay-close">
            <button class="close js-close" aria-label="[$148]">
                <i class="sprite-fm-mono icon-dialog-close"></i>
            </button>

            <span>[$6951]</span>
        </div>

        <section class="content">
            <div class="feedback-dialog-body">
                <div class="feedback-dialog-header" id="feedback-dialog-title">[$7238]</div>
                <div class="fm-mega-dialog-pad">
                    <div class="rating">
                        <a class="unhappy">
                            <i class="sprite-fm-mono icon-star-filled"></i>
                        </a>
                        <a class="sad">
                            <i class="sprite-fm-mono icon-star-filled"></i>
                        </a>
                        <a class="neutral">
                            <i class="sprite-fm-mono icon-star-filled"></i>
                        </a>
                        <a class="happy">
                            <i class="sprite-fm-mono icon-star-filled"></i>
                        </a>
                        <a class="awesome">
                            <i class="sprite-fm-mono icon-star-filled"></i>
                        </a>
                        <div class="clear"></div>
                    </div>
                    <div class="feedback-dialog-textarea mega-textarea">
                        <div class="feedback-dialog-scr textarea-scroll">
                            <textarea name="feedback" placeholder="[$17700]"></textarea>
                        </div>
                    </div>
                    <div class="reply">
                        <div class="feedback-label-txt">
                            <div class="checkdiv checkboxOff">
                                <input type="checkbox" name="contact_me" id="contact_me" />
                            </div>

                            <label for="contact_me" class="radio-txt">[$6856]</label>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="feedback-dialog-input hidden">
                        <input name="feedback-email" type="text" placeholder="email@domain.com" maxlength="190" />
                    </div>
                    <div class="stats">
                        <div class="feedback-label-txt">
                            <div class="checkdiv checkboxOff">
                                <input type="checkbox" name="send_stats" id="send_stats" />
                            </div>

                            <label for="send_stats" class="radio-txt">
                                [$6945]
                            </label>
                            <span class="feedback-question sprite-fm-theme-before icon-question-grey-before">
                                <span class="dropdown body dropdown-arrow down-arrow">
                                    <i class="dropdown-white-arrow"></i>
                                    <span>[$17701]</span>
                                </span>
                            </span>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="feedback-result-pad hidden">
                <div class="payment-result-header">[$7004]</div>
                <i class="result-icon sprite-fm-uni icon-success"></i>
                <button class="mega-button positive large result-button">
                    <span>[$148]</span>
                </button>
            </div>
        </section>
    </div>

    <!-- Dialog: collected-data-review-dialog -->
    <div class="mega-dialog dialog-template-main collected-data-review-dialog hidden"
         role="dialog"
         aria-labelledby="collected-data-review-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="collected-data-review-dialog-title"></h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="collected-data-textarea">
                    <ul class="collected-data selectable-txt"></ul>
                </div>
            </div>
        </section>
    </div>

    <!-- Dialog: credentials-warning-dialog -->
    <!-- Dialog is shown when user's Ed25519 public key fingerprint mismatches. -->
    <div class="mega-dialog dialog-template-main credentials-warning-dialog filled-input hidden"
         role="dialog"
         aria-labelledby="credentials-warning-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="credentials-warning-dialog-title"></h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="avatarAndWarningMessage">
                    <div class="userAvatar">
                        <img alt="avatar" />
                    </div>
                    <div class="information">
                        <span class="firstLine">
                            [$6881]
                        </span>
                        [$7688]
                    </div>
                </div>
            </div>

            <div class="content-block">
                <!-- Step 1 -->
                <div class="previousCredentials">
                    <div class="title">[$6883]:</div>
                    <div class="fingerprint selectable-txt"></div>
                </div>
            </div>
            <div class="content-block alt-background highlighted-section">
                <div class="newCredentials">
                    <div class="title">[$6858]:</div>
                    <div class="fingerprint selectable-txt"></div>
                </div>
                <div class="resetCredentials">
                    <div class="title">[$7689]:</div>
                    <div class="description">
                        [$7690]
                    </div>
                    <button class="mega-button reset-credentials-button">
                        <div>
                            <i class="sprite-fm-mono icon-sync"></i>
                        </div>
                        <span>[$742]</span>
                    </button>
                </div>

                <!-- Step 2 -->
                <div class="postResetCredentials hidden">
                    <div class="title">[$7691]:</div>
                    <div class="fingerprint selectable-txt"></div>
                </div>
                <div class="verifyCredentials hidden">
                    <div class="title">[$verify_credentials]:</div>
                    <div class="description">
                        [$7693]
                    </div>
                    <button class="mega-button positive verify-contact-button">
                        <div>
                            <i class="sprite-fm-mono icon-active"></i>
                        </div>
                        <span>[$1960]...</span>
                    </button>
                </div>
            </div>
        </section>
    </div>

    <!-- Dialog: key-signature-warning-dialog -->
    <!-- Dialog is shown when user's public key signature fails validation. -->
    <div class="mega-dialog dialog-template-message key-signature-warning-dialog filled-input hidden"
         role="dialog"
         aria-labelledby="key-signature-warning-dialog-title"
         aria-modal="true">

        <header>
            <div class="graphic userAvatar">
                <img alt="avatar" />
            </div>
            <div>
                <h3 id="key-signature-warning-dialog-title"></h3>
                <p class="information">
                    <span class="firstLine">
                        [$7585]
                    </span>
                    <span class="description">
                        [$8436]
                    </span>
                </p>
            </div>
        </header>
    </div>

    <!-- Dialog: payment-dialog -->
    <div class="mega-dialog dialog-template-action payment-dialog hidden"
         role="dialog"
         aria-labelledby="payment-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div>
                <div class="plan-icon pro1">
                    <i class="pro1 sprite-fm-uni icon-crests-pro-1-details"></i>
                    <i class="pro2 sprite-fm-uni icon-crests-pro-2-details"></i>
                    <i class="pro3 sprite-fm-uni icon-crests-pro-3-details"></i>
                    <i class="pro4 sprite-fm-uni icon-crests-lite-details"></i>
                    <i class="business sprite-fm-uni icon-crests-business-details"></i>
                    <i class="feature"></i>
                </div>
                <div class="payment-plan-info">
                    <div class="payment-plan-title trial-title">PRO I</div>wwewrwerwer
                    <div class="payment-plan-txt">1 month <span>([$6965])</span></div>
                </div>
            </div>

            <div class="payment-plan-price">9.99</div>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="payment-half-block first">
                    <div class="payment-form-title"> [$6964]: </div>
                    <div class="mega-input box-style">
                        <input class="address1" type="text" value="" placeholder="[$561] 1">
                    </div>
                    <div class="mega-input box-style">
                        <input class="address2" type="text" value="" placeholder="[$561] 2 ([$2028])">
                    </div>
                    <div class="mega-input box-style">
                        <input class="city" type="text" value="" placeholder="[$565]">
                    </div>
                    <div class="mega-input box-style">
                        <input class="state-province" type="text" value="" placeholder="[$653]">
                    </div>
                    <div class="mega-input dropdown-input box-style countries" id="countries">
                        <span>[$481]</span>
                        <i class="sprite-fm-mono icon-dropdown"></i>
                        <div class="mega-input-dropdown hidden"><div class="dropdown-scroll"></div></div>
                    </div>
                    <div class="mega-input box-style code">
                        <input class="post-code" type="text" value="" placeholder="Postal Code">
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="payment-half-block second">
                    <div class="payment-form-title"> [$6963]: </div>
                    <div class="payment-cc">
                        <div class="radioOn hidden" id="rad1_div">
                            <input type="radio" id="rad1" class="radioOn" value="1" checked="checked">
                        </div>
                        <i class="payment-cc-icon sprite-fm-uni icon-visa-border"></i>
                        <i class="payment-cc-icon mastercard sprite-fm-uni icon-mastercard-border"></i>
                    </div>
                    <div class="compound-inputs">
                        <div class="mega-input box-style">
                            <input class="first-name" type="text" value="" placeholder="[$1096]">
                        </div>
                        <div class="mega-input box-style">
                            <input class="last-name" type="text" value="" placeholder="[$1097]">
                        </div>
                    </div>
                    <div class="mega-input box-style">
                        <input class="credit-card-number" type="text" value="" placeholder="Credit Card Number">
                    </div>
                    <div class="compound-inputs triplex">
                        <div class="mega-input dropdown-input box-style expiry-date-month" id="expiry-date-month">
                            <span>[$913]</span>
                            <i class="sprite-fm-mono icon-dropdown"></i>
                            <div class="mega-input-dropdown hidden"><div class="dropdown-scroll"></div></div>
                        </div>
                        <div class="mega-input dropdown-input expiry-date-year box-style" id="expiry-date-year">
                            <span>[$932]</span>
                            <i class="sprite-fm-mono icon-dropdown"></i>
                            <div class="mega-input-dropdown hidden"><div class="dropdown-scroll"></div></div>
                        </div>
                        <div class="mega-input box-style">
                            <input class="cvv-code" type="text" value="" placeholder="CVV">
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive large payment-buy-now">
                    <span>[$6190]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: payment-stripe-dialog -->
    <div class="mega-dialog dialog-template-tool payment-stripe-dialog business hidden"
         role="dialog"
         aria-modal="true">

        <section class="content">
            <div class="content-block iframe-container">
                <!-- iframe will be inserted here -->
            </div>
        </section>
    </div>

    <!-- Dialog: payment-stripe-success-dialog -->
    <div class="mega-dialog dialog-template-graphic payment-stripe-success-dialog hidden"
         role="dialog"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="graphic sprite-fm-uni icon-success"></i>
            <h2 class="payment-stripe-success-dialog-title">[$25047]</h2>
        </header>

        <section class="content">
            <div class="content-block payment-success dialog-bottom">
                [$25048]
            </div>
        </section>
    </div>

    <!-- Dialog: payment-stripe-failure-dialog -->
    <div class="mega-dialog dialog-template-graphic payment-stripe-failure-dialog hidden"
         role="dialog"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="graphic sprite-fm-uni icon-error"></i>
            <h2 class="payment-stripe-failure-dialog-title">[$25049]</h2>
        </header>

        <section class="content">
            <div class="content-block dialog-bottom">
                <p class="stripe-error"></p>
            </div>
        </section>
    </div>

    <!-- Dialog: payment-address-dialog -->
    <div class="mega-dialog dialog-template-action payment-address-dialog hidden"
         role="dialog"
         aria-labelledby="payment-address-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div>
                <!-- <div class="plan-icon pro1">
                    <i class="pro1 sprite-fm-uni icon-crests-pro-1-details"></i>
                    <i class="pro2 sprite-fm-uni icon-crests-pro-2-details"></i>
                    <i class="pro3 sprite-fm-uni icon-crests-pro-3-details"></i>
                    <i class="pro4 sprite-fm-uni icon-crests-lite-details"></i>
                    <i class="pro101 sprite-fm-uni icon-crests-pro-flexi-details"></i>
                    <i class="business sprite-fm-uni icon-crests-business-details"></i>
                    <i class="feature"></i>
                </div> -->
                <div class="payment-plan-info">
                    <div id="payment-address-dialog-title" class="payment-plan-title">PRO I</div>
                    <div class="free-trial-subtitle free-trial hidden">[$free_trial_caps]</div>
                    <div class="payment-plan-txt js-plan-txt-normal hidden">
                        <span class="duration">[$922]</span> <span class="recurring">([$6965])</span>
                    </div>
                    <div class="payment-plan-txt js-plan-txt-discount hidden"></div>
                </div>
            </div>
            <div class="payment-plan-price"><span class="price">9.99</span></div>
        </header>

        <section class="content">
            <div class="content-block payment-address-dialog-body">
                <div class="free-trial-info free-trial hidden"></div>
                <div class="payment-note-first js-multi-discount-recurring hidden">
                    <span class="js-discount-text"></span> [$10630]
                </div>
                <div class="payment-note-first recurring hidden">
                    <span class="duration">[$10628]</span> [$10630]
                </div>
                <div class="payment-note-first one-time hidden">
                    [$10631]
                </div>
                <div class="payment-note-first free-trial monthly hidden">[$10630]</div>

                <div class="payment-form-header">
                    <div class="payment-form-title">[$10632]</div>
                    <div class="payment-icons">
                        <i class="payment-cc-icon sprite-fm-uni icon-visa-border visa"></i>
                        <i class="payment-cc-icon sprite-fm-uni icon-mastercard-border mastercard"></i>
                        <i class="payment-provider-icon sprite-fm-uni hidden"></i>
                    </div>
                    <div class="clear"></div>
                </div>

                <div id="address-dialog-countries" class="countries mega-input dropdown-input underlinedText" tabindex="1">
                    <span>[$481]</span>
                    <i class="sprite-fm-mono icon-dropdown"></i>
                    <div class="mega-input-dropdown hidden">
                        <div class="dropdown-scroll"></div>
                    </div>
                </div>
            </div>
            <div class="content-block address-block">
                <div class="payment-half-block first">
                    <input class="first-name underlinedText" type="text" value="" placeholder="[$1096]" tabindex="2">
                    <input class="address1 underlinedText" type="text" value="" placeholder="[$561] 1" tabindex="4">
                    <input class="city underlinedText" type="text" value="" placeholder="[$565]" tabindex="6">
                    <input class="postcode underlinedText" type="text" value="" placeholder="[$10659]" tabindex="8">

                    <div class="clear"></div>
                </div>
                <div class="payment-half-block second">
                    <input class="last-name underlinedText" type="text" value="" placeholder="[$1097]" tabindex="3">
                    <input class="address2 underlinedText" type="text" value="" placeholder="[$561] 2 ([$2028])" tabindex="5">
                    <div id="address-dialog-states" class="states mega-input dropdown-input underlinedText" tabindex="-1" disabled>
                        <span>[$7192]</span>
                        <i class="sprite-fm-mono icon-dropdown"></i>
                        <div class="mega-input-dropdown hidden">
                            <div class="dropdown-scroll">
                                <div class="option">[$7192]</div>
                            </div>
                        </div>
                    </div>
                    <input class="taxcode underlinedText" type="text" value="" placeholder="[$7347]" tabindex="9">
                    <div class="taxcode-invoice-note"><span></span></div>
                </div>
            </div>
            <div class="error-message hidden">[$10633]</div>
            <div class="remember-billing-info-wrapper">
                <div class="checkbox checkboxOn">
                    <input id="address-dialog-save-billing-info" class="checkboxOn remember-billing-info" type="checkbox">
                </div>
                <label for="address-dialog-save-billing-info" class="radio-txt">[$20237]</label>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive large payment-buy-now">
                    <span>[$enter_card_details]</span>
                </button>
            </div>

            <aside>
                <div class="payment-note-second">
                    [$10634]<br>
                    [$10635]
                </div>
            </aside>
        </footer>
    </div>

    <!-- Dialog: wire-transfer-dialog -->
    <div class="mega-dialog dialog-template-main wire-transfer-dialog hidden"
         role="dialog"
         aria-labelledby="wire-transfer-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="wire-transfer-dialog-title">[$6198]</h2>
        </header>

        <section>
            <div class="content-block dialog-bottom">
                <div class="wire-transfer">
                    <div class="resellers-top-txt">
                        [$8667]<br>
                        <br>
                        <div class="wire-transfer-options">
                            <table class="wire-transfer-details selectable-txt">
                                <tr>
                                    <!-- Bank name -->
                                    <th>[$939]</th>
                                    <td>Bank of New Zealand, Wellington, New Zealand</td>
                                </tr>
                                <tr>
                                    <!-- Bank address -->
                                    <th>[$6222]</th>
                                    <td>262 Queen Street, Auckland 1010, New Zealand</td>
                                </tr>
                                <tr>
                                    <!-- Account name -->
                                    <th>[$6197]</th>
                                    <td>Mega Limited</td>
                                </tr>
                                <tr>
                                    <!-- Company address -->
                                    <th>[$20951]</th>
                                    <td>120 Albert St, Auckland 1010, New Zealand</td>
                                </tr>
                                <tr>
                                    <!-- Account number -->
                                    <th class="vertical-align-top">[$6200]</th>
                                    <td>
                                        <p>752971-0000 (USD)</p>
                                        <p>752971-0002 (EUR)</p>
                                    </td>
                                </tr>
                                <tr>
                                    <!-- BIC / SWIFT code -->
                                    <th>[$6203]</th>
                                    <td>BKNZNZ22</td>
                                </tr>
                                <tr>
                                    <!-- Reference -->
                                    <th>[$6205]</th>
                                    <td><span class="email-address">[$6206]</span></td>
                                </tr>
                                <tr>
                                    <!-- Amount -->
                                    <th>[$23399]</th>
                                    <td><span class="amount"></span></td>
                                </tr>
                            </table>
                            <table class="wire-transfer-details selectable-txt">
                                <tr>
                                    <!-- Bank name -->
                                    <th>[$939]</th>
                                    <td>TransferWise Europe SA</td>
                                </tr>
                                <tr>
                                    <!-- Bank address -->
                                    <th>[$6222]</th>
                                    <td>Avenue Louise 54, Room S52, Brussels 1050, Belgium.</td>
                                </tr>
                                <tr>
                                    <!-- Account name -->
                                    <th>[$6197]</th>
                                    <td>Mega Limited</td>
                                </tr>
                                <tr>
                                    <!-- Company address -->
                                    <th>[$20951]</th>
                                    <td>120 Albert St, Auckland 1010, New Zealand</td>
                                </tr>
                                <tr>
                                    <!-- International Bank Account Number -->
                                    <th>[$8668]</th>
                                    <td>BE53 9673 7979 2853</td>
                                </tr>
                                <tr>
                                    <!-- BIC / SWIFT code -->
                                    <th>[$6203]</th>
                                    <td>TRWIBEB1</td>
                                </tr>
                                <tr>
                                    <!-- Reference -->
                                    <th>[$6205]</th>
                                    <td><span class="email-address">[$6206]</span></td>
                                </tr>
                                <tr>
                                    <!-- Amount -->
                                    <th>[$23399]</th>
                                    <td><span class="amount"></span></td>
                                </tr>
                            </table>
                        </div>

                        <!-- Instructions for the user -->
                        <ul>
                            <li>[$8670]</li>
                            <li>[$6207]</li>
                            <li>
                                <b class="red">*</b> [$8671]
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </div>


    <!-- Dialog: Pro plan benefits: Pre-cancellation -->
    <div class="mega-dialog dialog-template-main cancel-subscription-benefits hidden"
         role="dialog"
         aria-labelledby="cancel-benefits-title"
         aria-modal="true">

        <header class="cancel-subscription-benefits-header">
            <h3>[$cancel_pro_header]</h3>
            <button class="close js-close" aria-label="[$148]">
                <i class="sprite-fm-mono icon-dialog-close"></i>
            </button>
        </header>
        <div class="cancel-subscription-benefits-content">

            <div class="cancel-subscription-info">[$cancel_pro_info]</div>
            <div class="over-storage-banner hidden">
                <span></span>
                <a class="clickurl" data-eventid="500872" target="_blank" rel="noopener noreferrer" href="https://help.mega.io/plans-storage/space-storage/storage-exceeded">[$8742]</a>
            </div>
            <div class="features-table">
                <div class="features-table-header">
                    <div class="features-table-header-content">[$23377]</div>
                    <div class="features-table-header-content center">[$1150]</div>
                    <div class="features-table-header-content center plan-name"></div>
                </div>

                <div class="features-table-content">
                    <div class="features-table-item title">[$495]</div>
                    <div class="features-table-item center free-storage"></div>
                    <div class="features-table-item center pro-storage"></div>

                    <div class="features-table-seperator"></div>

                    <div class="features-table-item title">[$18057]</div>
                    <div class="features-table-item center free-transfer"></div>
                    <div class="features-table-item center pro-transfer"></div>

                    <div class="features-table-seperator"></div>

                    <div class="features-table-item title">[$cancel_pro_password_links]</div>
                    <div class="features-table-item center">
                        <i class="tiny-icon red-cross"></i>
                    </div>
                    <div class="features-table-item center">
                        <i class="small-icon icons-sprite bold-green-tick"></i>
                    </div>

                    <div class="features-table-seperator"></div>

                    <div class="features-table-item title">[$pr_link_expire]</div>
                    <div class="features-table-item center">
                        <i class="tiny-icon red-cross"></i>
                    </div>
                    <div class="features-table-item center">
                        <i class="small-icon icons-sprite bold-green-tick"></i>
                    </div>

                    <div class="features-table-seperator"></div>

                    <div class="features-table-item title">[$pr_trns_share]</div>
                    <div class="features-table-item center">
                        <i class="tiny-icon red-cross"></i>
                    </div>
                    <div class="features-table-item center">
                        <i class="small-icon icons-sprite bold-green-tick"></i>
                    </div>

                    <div class="features-table-seperator"></div>

                    <div class="features-table-item title">[$rewind]</div>
                    <div class="features-table-item center rewind-free">[$rewind_free_feature]</div>
                    <div class="features-table-item center rewind-pro">[$pr_365_days]</div>

                    <div class="features-table-seperator"></div>

                    <div class="features-table-item title">[$mega_vpn]</div>
                    <div class="features-table-item center">
                        <i class="tiny-icon red-cross"></i>
                    </div>
                    <div class="features-table-item center">
                        <i class="small-icon icons-sprite bold-green-tick"></i>
                    </div>

                    <div class="features-table-seperator"></div>

                    <div class="features-table-item title">[$mega_pass]</div>
                    <div class="features-table-item center">
                        <i class="tiny-icon red-cross"></i>
                    </div>
                    <div class="features-table-item center">
                        <i class="small-icon icons-sprite bold-green-tick"></i>
                    </div>

                    <div class="features-table-seperator"></div>

                    <div class="features-table-item title">[$pr_call_meet_duration]</div>
                    <div class="features-table-item center meet-duration"></div>
                    <div class="features-table-item center">[$7094]</div>

                    <div class="features-table-seperator"></div>

                    <div class="features-table-item title">[$pr_call_meet_participants]</div>
                    <div class="features-table-item center meet-participants"></div>
                    <div class="features-table-item center">[$7094]</div>
                </div>
            </div>
        </div>

        <footer>
            <div class="cancel-buttons">
                <button class="mega-button js-continue">
                    <span>[$cancel_pro_continue]</span>
                </button>
                <button class="mega-button positive js-keep-plan">
                    <span></span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: cancel-subscription-st1 -->
    <div class="mega-dialog dialog-template-main cancel-subscription-st1 hidden"
         role="dialog"
         aria-labelledby="cancel-subscription-st1-title"
         aria-modal="true">

        <div class="label-wrap built-option cancel-subscription-radio-template hidden">
            <div class="cancel-option radioOff" id="subcancel_div">
                <input type="radio" id="subcancel" class="cancel-option radioOff" value="">
            </div>
            <div class="radio-txt"></div>
        </div>

        <header class="cancel-subscription-header">
            <h2 id="cancel-subscription-st1-title">[$6822]</h2>
            <button class="close js-close" aria-label="[$148]">
                <i class="sprite-fm-mono icon-dialog-close"></i>
            </button>
        </header>

        <section class="content">
            <div class="content-block cancellation-reason">
                <div class="fm-dialog-top-text">
                    [$6996]
                </div>
                <div class="cancel-option-prompt pt-1">[$7005]</div>
                <div class="cancel-option-info"></div>
                <div class="error-banner select-reason hidden">[$cancel_sub_no_opt_picked_mob]</div>
                <form class="cancel-options">
                    <div class="label-wrap">
                        <div class="cancel-option radioOff" id="subcancel8_div">
                            <input type="radio" id="subcancel8" class="cancel-option radioOff" value="8">
                        </div>
                        <div class="radio-txt">[$cancel_sub_other_reason]</div>
                    </div>
                    <div class="textarea-and-banner hidden">
                        <div class="cancel-textarea-bl mega-textarea">
                            <div class="cancel-textarea textarea-scroll">
                                <textarea></textarea>
                            </div>
                        </div>
                        <div class="error-banner invalid-details hidden"></div>
                    </div>
                </form>
            </div>
            <div class="content-block cancellation-contact">
                <div class="cancel-option-prompt">[$cancel_sub_can_contact]</div>
                <div class="error-banner select-can-contact hidden">[$cancel_sub_err_make_selection]</div>
                <form class="allow-contact-options mega-gap-12">
                    <div class="allow-contact-wrapper">
                        <div class="contact-option radioOff" id="cancel_sub_contact_yes">
                            <input type="radio" class="contact-option radioOff" value="1">
                        </div>
                        <div class="radio-txt">[$78]</div>
                    </div>
                    <div class="allow-contact-wrapper">
                        <div class="contact-option radioOff" id="cancel_sub_contact_no">
                            <input type="radio" class="contact-option radioOff" value="0">
                        </div>
                        <div class="radio-txt">[$79]</div>
                    </div>
                </form>
            </div>
        </section>
        <footer>
            <div class="footer-container">
                <button class="mega-button dont-cancel">
                    <span>[$dont_cancel_sub_btn_label]</span>
                </button>
                <div class="cancel-buttons">
                    <button class="mega-button positive cancel-subscription px-3">
                        <span>[$skip_and_cancel]</span>
                    </button>
                </div>
            </div>
        </footer>
    </div>

    <!-- Dialog: cancel-subscription-st2 -->
    <div class="mega-dialog dialog-template-message cancel-subscription-st2 hidden"
         role="dialog"
         aria-labelledby="cancel-subscription-st2-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic sprite-fm-uni icon-success"></div>
            <div class="message-body">
                <h2 id="cancel-subscription-st2-title">[$6999]</h2>
                <p>
                    [$7004]
                </p>
            </div>
        </header>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive js-close">
                    <span>[$81]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: voucher-dialog -->
    <div class="mega-dialog dialog-template-tool voucher-dialog hidden"
         role="dialog"
         aria-labelledby="voucher-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header></header>

        <section class="content">
            <div class="content-block">
                <div class="plan-icon pro1">
                    <i class="pro1 sprite-fm-uni icon-crests-pro-1-details"></i>
                    <i class="pro2 sprite-fm-uni icon-crests-pro-2-details"></i>
                    <i class="pro3 sprite-fm-uni icon-crests-pro-3-details"></i>
                    <i class="pro4 sprite-fm-uni icon-crests-lite-details"></i>
                    <i class="business sprite-fm-uni icon-crests-business-details"></i>
                    <i class="feature"></i>
                </div>
                <div class="voucher-plan-info">
                    <div id="voucher-dialog-title" class="voucher-plan-title">PRO I</div>
                    <div class="voucher-plan-txt">
                        <span class="duration">1 month</span> <span>[$6941]</span>
                    </div>
                </div>
                <div class="voucher-plan-price">
                    <span class="price">9.99</span>
                </div>
                <div class="clear"></div>
                <div class="voucher-block">
                    <div class="voucher-account-balance">
                        <span class="balance-amount">0.00</span>
                    </div>
                    <div class="voucher-sub-title">[$7201]</div>
                    <div class="voucher-information-help">[$7202]</div>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <div class="voucher-input-container hidden">
                    <div id="voucher-code-input" class="fm-account-input">
                        <input type="text" placeholder="[$1015]" value="" />
                    </div>
                    <button class="mega-button positive voucher-redeem-now">
                        <span>[$7160]</span>
                    </button>
                </div>
                <button class="mega-button voucher-redeem">
                    <span>[$7160]</span>
                </button>
                <button class="mega-button positive voucher-buy-now">
                    <span>[$6190]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: astropay-dialog -->
    <div class="mega-dialog dialog-template-main astropay-dialog hidden"
         role="dialog"
         aria-labelledby="astropay-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="astropay-dialog-title">[$7985]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="astropay-information">[$7991] [$7986]</div>
                <label class="astropay-label" for="astropay-name-field">[$7987]:</label>
                <div class="mega-input box-style">
                    <input id="astropay-name-field" class="astropay-name-field" type="text" placeholder="[$7988]">
                </div>

                <label class="astropay-label address" for="astropay-address-field">[$561]:</label>
                <div class="mega-input box-style">
                    <input id="astropay-address-field" class="astropay-address-field" type="text" placeholder="[$561]">
                </div>

                <label class="astropay-label city" for="astropay-city-field">[$565]:</label>
                <div class="mega-input box-style">
                    <input id="astropay-city-field" class="astropay-city-field" type="text" placeholder="[$565]">
                </div>

                <label class="astropay-label tax" for="astropay-tax-field">[$7989]:</label>
                <div class="mega-input box-style">
                    <input id="astropay-tax-field" class="astropay-tax-field" type="text" placeholder="[$7990]">
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container space-between">
                <a class="powered-by-astropay" href="https://www.astropay.com/" target="_blank" rel="noopener noreferrer">
                    <i class="sprite-fm-uni icon-astropay"></i>
                </a>
                <div>
                    <button class="mega-button cancel">
                        <span>[$1597]</span>
                    </button>
                    <button class="mega-button positive accept">
                        <span>[$870]</span>
                    </button>
                </div>
            </div>
        </footer>
    </div>

    <!-- Dialog: copyrights-dialog -->
    <div class="mega-dialog dialog-template-tool copyrights-dialog hidden"
         role="dialog"
         aria-labelledby="copyrights-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic sprite-fm-illustration img-dialog-copyright"></div>
            <h2 id="copyrights-dialog-title">[$7696]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <p>[$7647]</p>
                <p>[$7648]</p>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button negative cancel">
                    <span>[$7646]</span>
                </button>
                <button class="mega-button positive accept">
                    <span>[$7645]</span>
                </button>
            </div>
        </footer>
    </div>


    <!-- Dialog: bitcoin-provider-failure-dialog -->
    <div class="mega-dialog dialog-template-message bitcoin-provider-failure-dialog hidden"
         role="dialog"
         aria-labelledby="bitcoin-provider-failure-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="graphic sprite-fm-uni icon-error"></i>
            <div>
                <h3 id="bitcoin-provider-failure-dialog-title">[$6815]</h3>
                <p>[$12482]</p>
            </div>
        </header>

        <footer>
            <div class="footer-container">
                <button class="mega-button negative js-close">
                    <span>[$148]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: limited-bandwidth-dialog -->
    <div class="mega-dialog dialog-template-action limited-bandwidth-dialog hidden"
         role="dialog"
         aria-label="Limited bandwidth dialog"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <section class="content">
            <div class="content-block centered-content">
                <i class="graphic full sprite-fm-illustration img-dialog-overquota-storage"></i>

                <div class="dialog header-before-icon limited">[$16164]</div>
                <div class="dialog header-before-icon exceeded">[$17]</div>

                <div class="messages">
                    <p class="msg-overquota"></p>
                    <p class="msg-prewarning"></p>
                    <div class="dialog transfer-overquota-txt"></div>
                </div>

                <div class="step1-block">
                    <div class="pricing-page radio-buttons individual-el right hidden">
                        <div class="radioOff">
                            <input id="d-pro-monthly-payment" name="d-pro-payment-period" type="radio" class="megaInputs radioOff" value="1">
                        </div>
                        <label class="radio-txt" for="d-pro-monthly-payment">[$23779]</label>
                        <div class="radioOff">
                            <input id="d-pro-yearly-payment" name="d-pro-payment-period" type="radio" class="megaInputs radioOff" value="12">
                        </div>
                        <label class="radio-txt" for="d-pro-yearly-payment">[$23780]</label>
                        <div class="save-yearly">[$redemption_save_16_percent]</div>
                    </div>
                </div>
            </div>

            <div class="content-block scrollable step1-block">
                <div class="offer-all offer hidden"></div>
                <div class="step1-block dialog-cards">
                    <div class="pricing-page plans-block">
                        <div class="pricing-page plans-row">
                            <div class="pricing-page plan template hidden" data-payment="">
                                <div class="offer offer-single hidden"></div>
                                <div class="pricing-page plan-header-container">
                                    <div class="pricing-page title-and-saving">
                                        <div class="pricing-page plan-title"></div>
                                        <div class="pricing-page plan-saving hidden"></div>
                                    </div>
                                    <div class="pricing-page period-subtitle"></div>
                                </div>
                                <div class="pricing-page plan-content">
                                    <div class="pricing-page cost">
                                        <div class="pricing-page plan-only"></div>
                                        <div class="pricing-page plan-price">
                                            <span class="price"></span><span class="ast">*</span>
                                        </div>
                                        <div class="pricing-page currency-and-period"></div>
                                        <div class="pricing-page monthly-price hidden">([$bsn_page_plan_price])</div>
                                        <div class="pricing-page pricing-plan-tax hidden">
                                            <span class="tax-info"></span>
                                            <span class="tax-price hidden"></span>
                                        </div>
                                    </div>
                                    <div class="pricing-page storage-and-transfer">
                                        <div class="pricing-page plan-feature storage strong">
                                            <span>[$23789.s]</span>
                                        </div>
                                        <div class="pricing-page plan-feature transfer strong">
                                            <span>[$23790.s]</span>
                                        </div>
                                    </div>
                                </div>
                                <button class="mega-button positive pricing-page plan-button"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="condition pricing-page local-currency-tip">* [$18770]</div>

            <div class="dialog bottom-button">
                <button class="mega-button dialog-action"></button>
                <button class="mega-button positive upgrade"></button>
            </div>
        </section>
    </div>

    <!-- Dialog: achievements-list-dialog -->
    <!-- New achievement dialog, please hide and show block when need !-->
    <div class="mega-dialog dialog-template-main achievements-list-dialog hidden"
         role="dialog"
         aria-labelledby="achievements-list-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="achievements-list-dialog-title">[$16365]</h2>
            <p class="achievements-list-info">
                [$achievem_storagetitle]
            </p>
        </header>

        <section class="content">
            <div class="content-block">
                <!-- Add scroll  -->
                <div class="achievements-scroll">
                    <div class="achievement-banner">
                        <div class="achieved-block storage-quota">
                            <div class="achievements-header-icon sprite-fm-uni icon-storage-quota"></div>
                            <div>
                                <div class="fm-account-header">
                                    <span>[$20183]</span>
                                </div>
                                <span class="quota-txt">XX GB</span>
                            </div>
                        </div>
                        <div class="achieved-block invitees">
                            <div class="achievements-header-icon sprite-fm-uni icon-users"></div>
                            <div>
                                <div class="fm-account-header">
                                    <span>[$20186]</span>
                                    <i class="new-dialog-icon sprite-fm-mono icon-new-window"></i>
                                </div>
                                <span class="quota-txt">0</span>
                            </div>
                        </div>
                        <div class="achieved-block">
                            <button class="mega-button default js-dashboard-btn large ">
                                <span>[$16668]</span>
                            </button>
                        </div>
                    </div>

                    <div class="achievements-list">
                        <!-- please place the achieved card to the end -->
                        <!-- Add class "achieved", "one-reward" !-->
                        <div class="achievements-cell ach-install-megasync">
                            <div class="achievement-details">
                                <div class="image-container">
                                    <i class="achievement-icon sprite-fm-illustration img-achievements-desktop-app"></i>
                                </div>
                                <div class="achievement-full info">
                                    <div>
                                        <div class="subtitle-txt">
                                            [$16278]
                                        </div>
                                        <div class="achi-content-txt">
                                            [$20235]
                                        </div>
                                    </div>
                                    <div class="achievement-dialog expires-txt"></div>
                                    <button class="mega-button positive" data-event-id="500794">
                                        <span>[$16295]</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Add class "achieved", "one-reward" !-->
                        <div class="achievements-cell ach-install-mobile-app">
                            <div class="achievement-details">
                                <div class="image-container">
                                    <i class="achievement-icon sprite-fm-illustration img-achievements-mobile-app"></i>
                                </div>
                                <div class="achievement-full info">
                                    <div>
                                        <div class="subtitle-txt">
                                            [$16280]
                                        </div>
                                        <div class="achi-content-txt">
                                            [$20176]
                                        </div>
                                    </div>
                                    <div class="achievement-dialog expires-txt"></div>
                                    <button class="mega-button positive" data-event-id="500795">
                                        <span>[$16295]</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Add class "achieved", "one-reward" !-->
                        <div class="achievements-cell ach-invite-friend">
                            <div class="achievement-details">
                                <div class="image-container">
                                    <i class="achievement-icon sprite-fm-illustration img-achievements-invite-users"></i>
                                </div>
                                <div class="achievement-full info">
                                    <div>
                                        <div class="subtitle-txt">
                                            [$16282]
                                        </div>
                                        <div class="achi-content-txt">
                                            [$20177]
                                        </div>
                                    </div>
                                    <div class="achievement-dialog expires-txt"></div>
                                    <button class="mega-button positive" data-event-id="500796">
                                        <span>[$8726]</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Add class "achieved", "one-reward" !-->
                        <div class="achievements-cell ach-sms-verification">
                            <div class="achievement-details">
                                <div class="image-container">
                                    <i class="achievement-icon sprite-fm-illustration img-achievements-sms-verification"></i>
                                </div>
                                <div class="achievement-full info">
                                    <div>
                                        <div class="subtitle-txt">
                                            [$20409]
                                        </div>
                                        <div class="achi-content-txt">
                                            [$achievem_smsveridesc]
                                        </div>
                                    </div>
                                    <div class="achievement-dialog expires-txt"></div>
                                    <button class="mega-button positive">
                                        <span>[$1960]</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Add class "achieved", "one-reward" !-->
                        <div class="achievements-cell ach-vpn-trial">
                            <div class="achievement-details">
                                <div class="image-container">
                                    <i class="achievement-icon"></i>
                                </div>
                                <div class="achievement-full info">
                                    <div>
                                        <div class="subtitle-txt">
                                            [$ach_vpn_trial_title]
                                        </div>
                                        <div class="achi-content-txt">
                                            [$ach_vpn_trial_blurb]
                                        </div>
                                    </div>
                                    <div class="achievement-dialog expires-txt"></div>
                                    <button class="mega-button positive" data-event-id="500810">
                                        <span>[$start_free_trial]</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Add class "achieved", "one-reward" !-->
                        <div class="achievements-cell ach-pwm-trial">
                            <div class="achievement-details">
                                <div class="image-container">
                                    <i class="achievement-icon"></i>
                                </div>
                                <div class="achievement-full info">
                                    <div>
                                        <div class="subtitle-txt">
                                            [$ach_pwm_trial_title]
                                        </div>
                                        <div class="achi-content-txt">
                                            [$ach_pwm_trial_blurb]
                                        </div>
                                    </div>
                                    <div class="achievement-dialog expires-txt"></div>
                                    <button class="mega-button positive" data-event-id="500811">
                                        <span>[$start_free_trial]</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <aside class="with-condition">
                <p>[$achievem_dialogfootertext]</p>
            </aside>
        </footer>
    </div>

    <!-- Please add "success" class !-->
    <div class="mega-dialog dialog-template-action invite-dialog hidden"
         role="dialog"
         aria-labelledby="invite-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic default-content sprite-fm-illustration img-achievements-invite-users"></div>
            <div class="graphic success-content sprite-fm-uni icon-check-circle"></div>
            <h2 id="invite-dialog-title">[$16282]</h2>
        </header>

        <section>
            <div class="content-block achievement-dialog">
                <div class="achievement-dialog default-content">
                    <div class="achievement-dialog header default">
                        [$20177]
                    </div>
                    <button class="mega-button action how-it-works closed">
                        [$1070]
                        <div>
                            <i class="sprite-fm-mono icon-arrow-up"></i>
                        </div>
                    </button>
                    <div class="how-it-works-body closed">
                        <div class="achievement-dialog info-body">
                            <p>
                                [$16317]
                            </p>
                            <p class="note">
                                [$16318]
                            </p>
                            <p class="note">
                                [$16331]
                            </p>
                        </div>
                    </div>
                    <div class="achievement-dialog input-header">
                        [$16319]
                    </div>
                    <div class="achievement-dialog input-field multiple-input emails">
                        <input type="text" class="achievement-dialog input" id="ach-invite-dialog-input" maxlength="190" />
                        <div class="clear"></div>
                    </div>
                    <div class="achievement-dialog input-info">
                        [$9093]
                    </div>
                </div>
                <div class="achievement-dialog success-content">
                    <div class="achievement-dialog header">
                        [$16320]
                    </div>
                    <div class="achievement-dialog green-header">
                        [$16332]
                    </div>
                    <div class="achievement-dialog info-body">
                        <div>
                            <ol>
                                <li>[$16333]</li>
                                <li>[$16334]</li>
                            </ol>
                            <p class="italic">
                                [$16335]
                            </p>
                        </div>
                        <div class="achievement-dialog links-block first">
                            <div class="achievement-dialog input-label">
                                [$16322]
                            </div>
                            <div class="achievement-dialog input-field">
                                <input type="text" class="achievement-dialog input" value="https://mega.io/desktop" readonly>
                            </div>
                        </div>
                        <div class="achievement-dialog links-block second">
                            <div class="achievement-dialog input-label">
                                [$16323]
                            </div>
                            <div class="achievement-dialog input-field">
                                <input type="text" class="achievement-dialog input" value="https://mega.io/mobile" readonly>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container default-content">
                <button class="mega-button status large hidden">
                    <!--Invitation Status--><span>[$16101]</span>
                </button>
                <button class="mega-button positive large disabled send">
                    <span>[$1940]</span>
                </button>
            </div>
            <div class="footer-container success-content">
                <button class="mega-button back large hidden">
                    <span>[$822]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: invitation-dialog -->
    <div class="mega-dialog dialog-template-main invitation-dialog hidden"
         role="dialog"
         aria-labelledby="invitation-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="invitation-dialog-title">[$16101]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="table">
                    <div class="table-row header">
                        <div class="table-cell">
                        </div>
                        <div class="table-cell">
                            <span>[$7434]</span><!-- Email -->
                        </div>
                        <div class="table-cell">
                            <span>[$89]</span><!-- Status -->
                        </div>
                        <div class="table-cell">
                            <span class="asc">[$16100]</span><!-- Date Sent -->
                        </div>
                    </div>
                </div>
                <div class="table-scroll">
                    <div class="table-bg">
                        <div class="table">

                            <div class="table-row">
                                <div class="table-cell icon">
                                    <i class="sprite-fm-mono"></i>
                                </div>
                                <div class="table-cell email">
                                    <strong></strong>
                                </div>
                                <div class="table-cell status">
                                    <span>
                                    </span>
                                </div>
                                <div class="table-cell date">
                                    <span></span>
                                    <button class="mega-button small resend">
                                        <div>
                                            <i class="sprite-fm-mono icon-sync"></i>
                                        </div>
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="table-info hint">
                    [$achievm_invitefrddesc]
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button reinvite-all">
                    <span>[$16103]</span>
                </button>
                <button class="mega-button positive invite-more">
                    <span>[$16102]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: storage-dialog -->
    <!-- Please add "achievements" class and "full"/"almost-full" class !-->
    <div class="mega-dialog dialog-template-action storage-dialog hidden"
         role="dialog"
         aria-label="Storage capacity warning"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="graphic full sprite-fm-illustration img-dialog-overquota-storage"></i>
            <h2 class="full"></h2>
            <h2 class="almost-full">[$16312]</h2>
        </header>

        <section class="content">
            <div class="content-block fm-dialog-body storage-dialog full dialog-bottom">
                <div class="storage-dialog body-p long main-text"></div>
                <div class="odq-warning hidden">
                    <div class="odq-divider"></div>
                    <div class="odq-body">
                        <i class="warning-icon sprite-fm-uni icon-warning"></i>
                        <div class="storage-dialog body-p"></div>
                    </div>
                    <div class="odq-divider"></div>
                </div>
                <div class="storage-dialog body-p rubbish-text top-pad">
                    [$16306]
                </div>
                <div class="storage-dialog buttons-block">
                    <button class="mega-button positive large choose-plan">
                        <span>[$8696]</span>
                    </button>
                </div>
                <div class="estimated-price-text hidden">
                    * [$18770]
                </div>
            </div>

            <div class="content-block fm-dialog-body storage-dialog almost-full dialog-bottom">
                <div class="body-header"></div>
                <div class="fm-account-blocks storage">
                    <div class="account chart-block tiny-chart">
                        <div class="account chart body">
                            <div class="account chart progressbars">
                                <div class="chart0 main-chart right-chart"><span></span></div>
                                <div class="chart0 main-chart left-chart"><span></span></div>
                            </div>
                            <span class="perc-txt">0%</span>
                        </div>
                        <div class="account chart data">
                            <div class="fm-account-header"><span>[$16119]</span></div>
                            <span class="size-txt">0 GB</span>
                            <span class="of-txt">/</span>
                            <span class="pecents-txt">0</span>
                            <span class="gb-txt">GB</span>
                        </div>
                    </div>
                </div>
                <div class="storage-dialog">
                    <div class="storage-dialog body-p main-text">
                        [$16313]
                    </div>
                    <div class="storage-dialog body-p rubbish-text top-pad">
                        [$16306]
                    </div>
                    <div class="storage-dialog buttons-block">
                        <button class="mega-button large skip hidden">
                            <span>[$ok_button]</span>
                        </button>
                        <button class="mega-button positive large choose-plan">
                            <span>[$8696]</span>
                        </button>
                    </div>
                    <div class="estimated-price-text hidden">
                        * [$18770]
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Dialog: duplicate-conflict -->
    <div class="mega-dialog dialog-template-tool duplicate-conflict hidden"
         role="dialog"
         aria-labelledby="duplicate-conflict-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="duplicate-conflict-title">[$16485]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="duplicate-conflict info-txt info-txt-fn">
                    [$16486]
                </div>
                <div class="duplicate-conflict info-txt light-grey">
                    [$16487]
                </div>

                <button class="duplicate-conflict action-block a1">
                    <div class="duplicate-conflict red-header">
                        [$17093]
                        <!--
                            [$17093] - Upload and update
                            [$16495] - Move and Replace
                            [$16496] - Copy and Replace
                        !-->
                    </div>
                    <div class="duplicate-conflict info-txt light-grey">
                        [$17097]
                        <!--
                            [$17097] - The file will be updated with version history. [A]Learn more[/A]:
                            [$16497] - Replace the file in the destination folder with the file you are moving:
                            [$16498] - Replace the file in the destination folder with the file you are copying:
                        !-->
                    </div>
                    <div class="duplicate-conflict info-block">
                        <div class="item-type-icon-90 icon-image-90"></div>
                        <div class="duplicate-conflict file-info">
                            <div class="duplicate-conflict info-txt file-name">
                                examplefilename.png
                            </div>
                            <div class="duplicate-conflict info-txt light-grey file-size">
                                700 KB
                            </div>
                            <div class="duplicate-conflict info-txt file-date">
                                <i class="small-icon clock"></i>
                                <span class="date">24 March 2017</span>
                                <span class="time">10:30</span>
                            </div>
                        </div>
                    </div>
                </button>

                <button class="duplicate-conflict action-block a2">
                    <div class="duplicate-conflict red-header">
                        [$16490]
                        <!--
                            [$16490] - Don't upload
                            [$16499] - Don't move
                            [$16500] - Don't copy
                        !-->
                    </div>
                    <div class="duplicate-conflict info-txt light-grey">
                        [$16491]
                    </div>
                    <div class="duplicate-conflict info-block">
                        <div class="item-type-icon-90 icon-image-90"></div>
                        <div class="duplicate-conflict file-info">
                            <div class="duplicate-conflict info-txt file-name">
                                examplefilename.png
                            </div>
                            <div class="duplicate-conflict info-txt light-grey file-size">
                                600 KB
                            </div>
                            <div class="duplicate-conflict info-txt file-date">
                                <i class="small-icon clock"></i>
                                <span class="date">20 March 2017</span>
                                <span class="time">10:30</span>
                            </div>
                        </div>
                    </div>
                </button>

                <button class="duplicate-conflict action-block a3">
                    <div class="duplicate-conflict red-header">
                        [$16492]
                    </div>
                    <div class="duplicate-conflict info-txt light-grey">
                        [$16493]
                        <!--
                            [$16493] The file you are uploading will be renamed as:
                            [$16514] The file you are moving will be renamed as:
                            [$16515] The file you are copying will be renamed as:
                        -->
                    </div>
                    <div class="duplicate-conflict info-block multiple-files">
                        <div class="item-type-icon-90 icon-image-90 double">
                            <div class="item-type-icon-90 icon-image-90"></div>
                        </div>
                        <div class="duplicate-conflict file-info">
                            <div class="duplicate-conflict info-txt file-name">
                                examplefilename.png
                            </div>
                        </div>
                    </div>
                </button>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <!-- <button class="mega-button skip-button hidden">
                    <span>[$1379]</span>
                </button> -->
                <button class="mega-button cancel-button">
                    <span>[$82]</span>
                </button>
            </div>
            <aside class="align-start">
                <!-- Please add "hidden" class !-->
                <div class="js-checkbox">
                    <div class="checkdiv checkboxOff">
                        <input type="checkbox" name="duplicates-checkbox" id="duplicates-checkbox" />
                    </div>
                    <!-- Please replace [S], [/S] by <span>, </span> !-->
                    <label for="duplicates-checkbox" class="radio-txt">[$16494]</label>
                </div>
            </aside>
        </footer>
    </div>

    <!-- Dialog: fm-voucher-popup -->
    <div class="mega-dialog dialog-template-main fm-voucher-popup hidden"
         role="dialog"
         aria-labelledby="fm-voucher-popup-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="fm-voucher-popup-title">[$7160]</h2>
        </header>

        <section class="content">
            <div class="content-block fm-voucher-body">
                <input class="underlinedText dialog-input" type="text" value="" name="dialog-voucher" placeholder="[$487]" />
                <div>
                    <button class="mega-button positive fm-voucher-button">
                        <span>[$458]</span>
                    </button>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container"></div>
        </footer>
    </div>

    <!-- Dialog: resume-transfer -->
    <div class="mega-dialog dialog-template-action resume-transfer hidden"
         role="dialog"
         aria-labelledby="resume-transfer-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="resume-transfer-title">[$16448]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="resume-transfer text">
                    [$17085]
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button large download cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive large download resume-transfers-button">
                    <div>
                        <i class="sprite-fm-mono icon-resume"></i>
                    </div>
                    <span>[$1649]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: park-account-dialog -->
    <!-- Park account warning -->
    <div class="mega-dialog dialog-template-main park-account-dialog hidden"
         role="dialog"
         aria-labelledby="park-account-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="park-account-dialog-title">[$18306]</h2>
            <p>[$18307]</p>
        </header>

        <section class="content">
            <div class="content-block improved-recovery-steps">
                <div class="checkbox-block park-account-checkbox">
                    <div class="checkbox-container">
                        <div class="settings-row">
                            <!-- The checkbox and the label should enable/disable the feature. The inputs should only work when the feature is enabled. Otherwise prevent them from interacting with the input -->
                            <!-- Toggle between checkboxOff and checkboxOn -->
                            <div class="checkdiv checkboxOff">
                                <!-- Toggle between checkboxOff and checkboxOn -->
                                <input type="checkbox" id="" class="checkboxOff" />
                            </div>
                            <label for="" class="radio-txt" id="warn1-check">[$18312]</label>
                        </div>
                        <div class="settings-row">
                            <!-- The checkbox and the label should enable/disable the feature. The inputs should only work when the feature is enabled. Otherwise prevent them from interacting with the input -->
                            <!-- Toggle between checkboxOff and checkboxOn -->
                            <div class="checkdiv checkboxOff">
                                <!-- Toggle between checkboxOff and checkboxOn -->
                                <input type="checkbox" id="" class="checkboxOff" />
                            </div>
                            <label for="" class="radio-txt" id="warn2-check">[$19851]</label>
                        </div>
                        <div class="settings-row">
                            <!-- The checkbox and the label should enable/disable the feature. The inputs should only work when the feature is enabled. Otherwise prevent them from interacting with the input -->
                            <!-- Toggle between checkboxOff and checkboxOn -->
                            <div class="checkdiv checkboxOff">
                                <!-- Toggle between checkboxOff and checkboxOn -->
                                <input type="checkbox" id="" class="checkboxOff" />
                            </div>
                            <label for="" class="radio-txt">[$18308]</label>
                        </div>
                    </div>
                </div>
                <div class="recover-account-email-block">
                    <input class="underlinedText withIcon" autocomplete="disabled" type="text" name="recover-input1" id="recover-input1-di" value="" placeholder="[$195]" maxlength="190" data-icon="sprite-fm-mono icon-email">
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container space-between">
                <button class="mega-button supportbtn">
                    <span>[$18148]</span>
                </button>
                <div>
                    <button class="mega-button closebtn">
                        <span>[$82]</span>
                    </button>
                    <button class="mega-button positive parkbtn">
                        <span>[$1947]</span>
                    </button>
                </div>
            </div>
        </footer>
    </div>

    <!-- Dialog: qr-contact -->
    <!-- QR Code Contact info Dialog !-->
    <div class="mega-dialog dialog-template-action qr-contact hidden"
         role="dialog"
         aria-labelledby="qr-contact-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="qr-contact-title">[$7371]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="avatar-container-qr-contact">
                    <div class="avatar-wrapper avatar">
                        <img />
                    </div>
                </div>
                <div class="qr-contact-name"></div>
                <div class="qr-contact-email"></div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <div>
                    <button class="mega-button positive large links-button" id="qr-ctn-add">
                        <span>[$101]</span>
                    </button>
                </div>
            </div>

            <aside>
                <div class="qr-ct-exist hidden">[$17886]</div>
            </aside>
        </footer>
    </div>

    <!-- Dialog: verify-two-factor-login -->
    <!-- Login with two-factor authentication !-->
    <div class="mega-dialog dialog-template-action two-factor-dialog verify-two-factor-login hidden"
         role="dialog"
         aria-labelledby="verify-two-factor-login-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="verify-two-factor-login-title"></h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="dialog-body-subheader">
                    <span>[$19191]:</span>
                </div>
                <div class="fm-account-input">
                    <input class="pin-input" type="text" value="" placeholder="[$19193]" maxlength="6">
                </div>
                <div class="warning-text-field failed v-hidden">[$19192]</div>
                <div class="warning-text-field empty hidden">[$19191]</div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <div>
                    <button class="mega-button large positive submit-button">
                        <span>[$1694]</span>
                        <div class="loader">
                            <img alt="" src="{staticpath}images/mobile/button-loader-green.gif" />
                        </div>
                    </button>
                </div>
            </div>

            <aside>
                <div class="lost-authenticator-button">[$19215]</div>
            </aside>
        </footer>
    </div>

    <!-- Dialog: setup-two-factor -->
    <!-- Setup Two-Factor Authentication !-->
    <div class="mega-dialog dialog-template-action two-factor-dialog setup-two-factor hidden"
         role="dialog"
         aria-labelledby="setup-two-factor-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="setup-two-factor-title">[$19289]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="instruction-message">
                    <div class="text">[$19205]</div>
                    <div class="no-auth-app-button">[$19565]</div>
                </div>
                <div class="two-factor-qr-code"></div>
                <div class="fm-account-input disabled">
                    <input class="two-factor-qr-seed" type="text" value="" readonly>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button large positive two-factor-next-btn">
                    <span>[$556]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: setup-two-factor-verify -->
    <!-- Set up Two factor verify the code from Authentication app -->
    <div class="mega-dialog dialog-template-action two-factor-dialog setup-two-factor-verify hidden"
         role="dialog"
         aria-labelledby="-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="setup-two-factor-verify-title"></h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="dialog-body-subheader">
                    <span>[$19196]</span>
                </div>
                <div class="fm-account-input">
                    <input class="pin-input" type="text" value="" placeholder="[$19193]" maxlength="6">
                </div>
                <div class="information-highlight warning failed hidden">
                    <span>[$19197]</span>
                </div>
                <div class="information-highlight warning empty hidden">
                    <span>[$19191]</span>
                </div>
                <div class="information-highlight success hidden">
                    <span>[$19198]</span>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button large back-button">
                    <span>[$822]</span>
                </button>
                <button class="mega-button large positive next-button">
                    <span>[$556]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: setup-two-factor-backup-key -->
    <!-- Post set up of Two Factor Authentication to backup the recovery key -->
    <div class="mega-dialog dialog-template-action two-factor-dialog setup-two-factor-backup-key hidden"
         role="dialog"
         aria-labelledby="setup-two-factor-backup-key-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="setup-two-factor-backup-key-title">[$8963]</h2>
        </header>

        <section class="content">
            <div class="content-block dialog-bottom">
                <div class="recovery-key-container">
                    <i class="recovery-key-icon sprite-fm-mime icon-text-24"></i>
                    <div class="recovery-key-info-block">
                        [$backup_setup_2fa_recovery_key]
                    </div>
                    <button class="mega-button positive recovery-key-button">
                        <span>[$1988]</span>
                    </button>
                </div>
                <div class="information-highlight warning">
                    <span>[$19199]</span>
                </div>
                <div class="dialog-body-centre-text">[$19200]</div>
            </div>
        </section>
    </div>

    <!-- Dialog: two-factor-verify-action -->
    <!-- Verify an account action with two-factor authentication PIN required !-->
    <div class="mega-dialog dialog-template-action two-factor-dialog two-factor-verify-action hidden"
         role="dialog"
         aria-labelledby="two-factor-verify-action-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="two-factor-verify-action-title"></h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="dialog-body-subheader">
                    <span>[$19191]:</span>
                </div>
                <div class="fm-account-input">
                    <input class="pin-input" type="text" value="" placeholder="[$19193]" maxlength="6">
                </div>
                <div class="information-highlight warning hidden">[$19191]</div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <div>
                    <button class="mega-button positive large submit-button">
                        <span>[$1694]</span>
                    </button>
                </div>
            </div>

            <aside>
                <div class="lost-authenticator-button">[$19215]</div>
            </aside>
        </footer>
    </div>

    <!-- Dialog: verify-phone -->
    <!-- Verify phone number super dialog -->
    <div class="mega-dialog dialog-template-tool verify-phone hidden"
         role="dialog"
         aria-labelledby="verify-phone-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="verify-phone-title" class="js-header-text"></h2>
            <div class="verify-ph-icon sprite-fm-illustration img-dialog-sms-verification"></div>
            <div class="verify-ph-success-icon sprite-fm-illustration img-dialog-mobile-success hidden"></div>
        </header>

        <section class="content">
            <div class="content-block">

                <!-- Step 1 - Phone Input -->
                <form id="verify-dialog_ph_form" class="js-phone-input-page hidden" autocomplete="off">
                    <div class="verify-ph-info">
                        <span class="js-body-text"></span>
                    </div>
                    <div class="mega-input title-ontop with-icon dropdown-input country verify-ph-country" id="verify-dialog-countries">
                        <div class="mega-input-title">[$481]</div>
                        <i class="sprite-fm-mono icon-languages"></i>
                        <span>[$996]</span>
                        <i class="sprite-fm-mono icon-dropdown"></i>
                        <div class="mega-input-dropdown js-country-list hidden">
                            <div class="dropdown-scroll">
                                <div class="option template"></div>
                            </div>
                        </div>
                    </div>
                    <input class="js-phone-input underlinedText" title="[$20214]" autocomplete="off" type="tel" name="verify-dialog-phone" data-icon="sprite-fm-mono icon-mobile-24px" value="">
                    <div class="account input-tooltip static js-warning-message"></div>
                </form>

                <!-- Step 2 - Verify Code (from SMS) -->
                <form id="verify-dialog_code_form" class="js-verify-code-page hidden" autocomplete="off">
                    <div class="verify-ph-info long">
                        <span>[$20217]</span>
                        <span class="phone-num js-user-phone-number"></span>
                    </div>
                    <div class="sms-code-input-container account grouped-inputs">
                        <input class="sms-verification-number-input js-verification-number-input" autocomplete="off" type="text" name="verify-dialog-code1" value="" maxlength="6">
                        <div class="account input-wrapper num"></div>
                        <div class="account input-wrapper num"></div>
                        <div class="account input-wrapper num"></div>
                        <div class="account input-wrapper num"></div>
                        <div class="account input-wrapper num"></div>
                        <div class="account input-wrapper num"></div>
                    </div>
                    <div class="account input-tooltip static js-warning-message"></div>
                    <div class="verify-ph-info long small-txt">
                        <span>[$20218]</span>
                        <a class="green-lnk js-resend-button">[$8744]</a>
                    </div>
                </form>

                <!-- Step 3 - Verify success -->
                <form id="verify-dialog_success_form" class="verify-success-page js-verify-success-page hidden">
                    <div class="verify-ph-info long">
                        <span class="js-body-text"></span>
                    </div>
                    <div class="verify-ph-bonus-container">
                        <div class="verify-ph-bonus-block storge-bonus">
                            <div class="icon56 achievements-icon bonus-image"></div>
                            <div class="verify-ph-bonus-intro-wrapper">
                                <div class="big-num js-storage-quota"></div>
                                <div class="body-txt">[$20405]</div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>

        <footer>
            <div class="footer-container js-phone-input-page hidden">
                <button class="mega-button not-now-button js-not-now-button" type="button">
                    <span>[$18682]</span>
                </button>
                <button class="mega-button positive disabled js-send-sms-button" tabindex="0" type="button">
                    <span>[$556]</span>
                </button>
            </div>
            <div class="footer-container js-verify-code-page hidden">
                <button class="mega-button js-back-button" tabindex="0" type="button">
                    <span>[$822]</span>
                </button>
                <button class="mega-button positive disabled js-verify-button" tabindex="0" type="button">
                    <span>[$870]</span>
                </button>
            </div>
            <div class="footer-container js-verify-success-page hidden">
                <button class="mega-button positive js-close-button" tabindex="0" type="button">
                    <span>[$148]</span>
                </button>
            </div>

            <aside class="js-verify-success-page hidden">
                <div class="verify-ph-bonus-valid-days">
                    <div class="valid-days-title">
                        <i class="sprite-fm-mono icon-recents"></i>
                        <span></span>
                    </div>
                </div>
            </aside>
        </footer>
    </div>

    <!-- Dialog: recovery-key-dialog -->
    <!-- Recover Account (Display recover key) !-->
    <div class="mega-dialog dialog-template-graphic recovery-key-dialog backup-recover improved-recovery-steps hidden"
         role="dialog"
         aria-labelledby="-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic pre-register sprite-fm-illustration img-dialog-account-lock"></div>
            <div class="graphic post-register sprite-fm-illustration img-dialog-account-recovery"></div>
            <h2 id="-title">[$19826]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <h3 class="step-main-question pre-register">[$19852]</h3>
                <p class="first-paragraph pre-register">[$19853]</p>
                <p class="second-paragraph pre-register">[$19854]</p>
                <p class="second-paragraph post-register">[$20189]<br /><a href="https://help.mega.io/accounts/password-management/recovery-key" class="info" target="_blank" rel="noopener noreferrer">[$8742]</a>.</p>
                <div class="recover-paste-block">
                    <div class="left-section">
                        <h3 class="backup-key-header">[$8963]</h3>
                        <div class="account input-wrapper recovery-key">
                            <i class="js-key sprite-fm-mono icon-key"></i>
                            <input id="backup_keyinput_2fa" type="text" value="u1i34fieinf13ifhf98dfasdfji" readonly>
                        </div>
                    </div>
                    <div class="account right-section button-wrapper">
                        <button class="mega-button copy-recovery-key-button">
                            <span>[$17386]</span>
                        </button>
                        <button class="mega-button positive save-recovery-key-button">
                            <span>[$58]</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <footer>
            <aside>
                <p class="reset-account">[$19840]</p>
                <p class="skip-button">[$20190]</p>
            </aside>
        </footer>
    </div>

    <!-- Dialog: contact-verification-dialog -->
    <div class="mega-dialog dialog-template-graphic contact-verification-dialog hidden"
         role="dialog"
         aria-labelledby="cv-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic contact-verification-img"></div>
            <h2 id="cv-title">[$contact_verification_dialog_title]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <p class="first-paragraph">[$contact_verification_dialog_content_1]</p>
                &nbsp;
                &nbsp;
                <p class="second-paragraph">[$contact_verification_dialog_content_2]</p>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive dialog-approve-button">
                    <span>[$contact_verification_dialog_button]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: recovery-key-info -->
    <!-- Recover Account (Display recover key) !-->
    <div class="mega-dialog dialog-template-tool recovery-key-info improved-recovery-steps hidden"
         role="dialog"
         aria-labelledby="recovery-key-info-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="recovery-key-info-title">[$19826]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <p>[$20192]</p>
                <div class="backup-key-info">
                    <div class="col-3 inline-block">
                        <i class="illustration-block sprite-fm-illustration img-dialog-printer"></i>
                        <div class="backup-key-info-text">
                            [$20193]
                        </div>
                    </div>
                    <div></div>
                    <div class="col-3 inline-block">
                        <i class="illustration-block sprite-fm-illustration img-dialog-pw-manager"></i>
                        <div class="backup-key-info-text">
                            [$20194]
                        </div>
                    </div>
                    <div></div>
                    <div class="col-3 inline-block">
                        <i class="illustration-block sprite-fm-illustration img-dialog-usb"></i>
                        <div class="backup-key-info-text">
                            [$20195]
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive close-dialog">
                    <span>[$81]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: user-management-add-user-dialog -->
    <!-- user management dialog -->
    <div class="mega-dialog dialog-template-main user-management-add-user-dialog user-management-dialog hidden"
         role="dialog"
         aria-labelledby="user-management-add-user-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic sent-email sprite-fm-illustration img-topbar-email-registration"></div>
            <h2 id="user-management-add-user-dialog-title">[$19104]</h2>
            <p class="dialog-subtitle">[$19117]</p>
        </header>

        <section class="content">
            <div class="content-block dialog-input-container hidden">
                <div class="account half-sized-block l">
                    <input class="underlinedText halfSize-l sub-n" type="text" placeholder="[$1096]" autofocus data-icon="sprite-fm-mono icon-user">
                    <input class="underlinedText halfSize-r sub-n-l" type="text" placeholder="[$1097]">
                </div>
                <div class="account half-sized-block r">
                    <input class="underlinedText sub-m" type="text" placeholder="[$7434]" data-icon="sprite-fm-mono icon-email">
                </div>
                <div class="clear"></div>
                <div class="toggle-optional-inputs-container">
                    <button class="mega-button action toggle-optional-inputs show opti-add-suba" tabindex="-1">
                        <span>[$19600]</span>
                        <div>
                            <i class="close-icon sprite-fm-mono icon-arrow-up"></i>
                        </div>
                    </button>
                </div>
                <div class="optional-input-container">
                    <div class="account half-sized-block l">
                        <input class="underlinedText sub-p" type="text" placeholder="[$19150]" data-icon="sprite-fm-mono icon-user">
                    </div>
                    <div class="account half-sized-block r">
                        <input class="underlinedText sub-id-nb" type="text" placeholder="[$19151]" data-icon="sprite-fm-mono icon-id">
                    </div>
                    <div class="account half-sized-block l">
                        <input class="underlinedText sub-ph" type="text" placeholder="[$19152]" data-icon="sprite-fm-mono icon-phone">
                    </div>
                    <div class="account half-sized-block r">
                        <input class="underlinedText sub-lo" type="text" placeholder="[$17818]" data-icon="sprite-fm-mono icon-location">
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="content-block">
                <div class="verification-container">
                    <div class="verification-user-info">
                        <!--add class: single-line-->
                        <div class="verification-user-email"><b>[$7434]:</b><div class="sub-e">major@126.com</div></div>
                        <div class="verification-user-pw"><b>[$18771]:</b><div class="sub-p">major@126.com</div></div>
                    </div>
                    <button class="mega-button positive copy-pw-btn">
                        <span>[$19601]</span>
                    </button>
                </div><!-- END folder container -->
                <div class="fingerprint-container hidden">
                    <div class="fingerprint-title">Your business admin credentials</div>
                    <div class="fingerprint-content-container">
                        <div>15AE9</div><div>15AE9</div><div>15AE9</div><div>15AE9</div><div>15AE9</div>
                        <div>15AE9</div><div>15AE9</div><div>15AE9</div><div>15AE9</div><div>15AE9</div>
                    </div>

                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <div>
                    <button class="mega-button hidden">
                        <span>[$16268]</span>
                    </button>
                    <button class="mega-button add-more">
                        <span>[$19103]</span>
                    </button>
                    <button class="mega-button positive add-sub-user">
                        <span>[$bsn_add_users]</span>
                    </button>
                </div>
                <div class="invite-link-option">
                    <div class="mega-switch">
                        <div class="mega-feature-switch"></div>
                    </div>
                    <div class="enable-pw-txt">[$19599]</div>
                </div>
            </div>

            <aside class="licence-bar hidden">
                <div class="notification-img icon"></div>
                5 (WAIT 4 API) sub account license used.
            </aside>
        </footer>
    </div>

    <!-- Dialog: user-management-edit-profile-dialog -->
    <div class="mega-dialog dialog-template-main user-management-edit-profile-dialog user-management-dialog hidden"
         role="dialog"
         aria-labelledby="user-management-edit-profile-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="user-management-subuser-avatars">
                <div class="user-management-subuser-image"></div>
            </div>
            <h2 id="user-management-edit-profile-dialog-title">[$16735]</h2>
        </header>

        <section class="content">
            <div class="content-block dialog-input-container">
                <div class="account half-sized-block l">
                    <input class="dialog-input underlinedText halfSize-l edit-sub-name" type="text" placeholder="[$1096]" autofocus>
                    <input class="dialog-input underlinedText halfSize-r edit-sub-lname" type="text" placeholder="[$1097]">
                </div>
                <div class="account half-sized-block r">
                    <input class="dialog-input underlinedText edit-sub-email" type="text" placeholder="[$9002]">
                </div>
                <div class="pending-email-note active simpletip" data-simpletip="[$19605]" data-simpletip-class="medium-width">
                    <b>[$19604]:</b> <span class="pending-email-txt"></span>
                </div>
                <div class="clear"></div>
                <div class="account half-sized-block l">
                    <input class="dialog-input underlinedText edit-sub-position" type="text" placeholder="[$19150]">
                </div>
                <div class="account half-sized-block r">
                    <input class="dialog-input underlinedText edit-sub-id-nb" type="text" placeholder="[$19151]">
                </div>
                <div class="account half-sized-block l">
                    <input class="dialog-input underlinedText edit-sub-phone" type="text" placeholder="[$19152]">
                </div>
                <div class="account half-sized-block r">
                    <input class="dialog-input underlinedText edit-sub-location" type="text" placeholder="[$17818]">
                </div>
                <div class="clear"></div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button btn-edit-close">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive btn-edit-save">
                    <span>[$776]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: sub-en-dis -->
    <div class="mega-dialog dialog-template-message user-management-able-user-dialog sub-en-dis user-management-dialog hidden"
         role="dialog"
         aria-labelledby="user-management-able-user-dialog-sub-en-dis-title"
         aria-modal="true">

        <header>
            <div class="graphic sprite-fm-uni"></div>
            <div>
                <h3 id="user-management-able-user-dialog-sub-en-dis-title" class="dialog-text-one">Are you sure you want to disable the account of <b>Jay Pierce</b>? </h3>
                <p class="dialog-text-two">Note: You can re-enable the account at any later stage from the disabled accounts list.</p>
            </div>
        </header>

        <footer>
            <div class="footer-container">
                <button class="mega-button dlg-btn no-answer">
                    <span>[$82]</span>
                </button>
                <button class="mega-button negative dlg-btn yes-answer">
                    <span>[$78]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: mig-success -->
    <div class="mega-dialog dialog-template-message user-management-able-user-dialog mig-success user-management-dialog hidden"
         role="dialog"
         aria-labelledby="user-management-able-user-dialog-mig-success-title"
         aria-modal="true">

        <header>
            <div class="graphic sprite-fm-uni icon-success"></div>
            <div>
                <h3 id="user-management-able-user-dialog-mig-success-title" class="dialog-text-one">Are you sure you want to disable the account of <b>Jay Pierce</b>? </h3>
            </div>
        </header>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive dlg-btn yes-answer">
                    <span>[$81]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: user-management-migrate-process-dialog -->
    <div class="mega-dialog dialog-template-tool user-management-migrate-process-dialog user-management-dialog hidden"
         role="dialog"
         aria-labelledby="user-management-migrate-process-dialog-title"
         aria-modal="true">

        <header>
            <h2 id="user-management-migrate-process-dialog-title">[$19621]</h2>
        </header>

        <section class="content">
            <div class="content-block animation">
                <div class="image-block">
                    <i class="from-folder sprite-fm-mime-90 icon-folder-90"></i>
                    <p class="sub-user-name-from"></p>
                </div>
                <div class="process-container">
                    <i class="process-arrow sprite-fm-mono icon-transfer-arrow"></i>
                </div>
                <div class="image-block">
                    <i class="from-folder sprite-fm-mime-90 icon-folder-90"></i>
                    <p>[$19622]</p>
                </div>
            </div>

            <div class="content-block alt-background progress dialog-bottom">
                <div class="data-migrate process-block">
                    <div class="data-migrate progress-bar"></div>
                </div>
                <div class="process-percentage"></div>
            </div>
        </section>
    </div>

    <!-- Dialog: bus-welcome-dialog -->
    <div class="mega-dialog dialog-template-graphic bus-welcome-dialog user-management-dialog hidden"
         role="dialog"
         aria-labelledby="bus-welcome-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="bus-welcome-dialog-title">[$19805]</h2>
        </header>

        <section class="content">
            <div class="content-block dialog-bottom">
                <div class="dialog-left-block add-subuser">
                    <i class="sprite-fm-uni icon-contact-add"></i>
                    <div class="dialog-sub-title">[$19084]</div>
                    <div class="dialog-txt">[$19139]</div>
                </div>
                <div class="dialog-right-block go-to-landing">
                    <i class="sprite-fm-uni icon-accounts"></i>
                    <div class="dialog-sub-title">[$18677]</div>
                    <div class="dialog-txt">[$19806]</div>
                </div>
            </div>
        </section>
    </div>

    <!-- Dialog: add-reassign-dialog -->
    <!-- business adding contact reassign dialog -->
    <div class="mega-dialog dialog-template-action add-reassign-dialog user-management-dialog hidden"
         role="dialog"
         aria-labelledby="add-reassign-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="add-reassign-dialog-title">[$20627]</h2>
        </header>

        <section class="content">
            <div class="content-block dialog-bottom">
                <table class="dialog-input-container">
                    <tr>
                        <th>
                            <i class="sprite-fm-illustration img-dialog-contacts"></i>
                        </th>
                        <th>
                            <i class="sprite-fm-illustration img-dialog-business-contacts"></i>
                        </th>
                    </tr>
                    <tr>
                        <td class="dialog-sub-title">[$165]</td>
                        <td class="dialog-sub-title">[$20628]</td>
                    </tr>
                    <tr>
                        <td class="dialog-txt">[$20629]</td>
                        <td class="dialog-txt">[$20630]</td>
                    </tr>
                    <tr>
                        <td>
                            <button class="mega-button positive dif-dlg-contact-add-btn">
                                <span>[$101]</span>
                            </button>
                        </td>
                        <td>
                            <button class="mega-button positive dif-dlg-user-add-btn">
                                <span>[$19084]</span>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </section>
    </div>

    <!-- Dialog: Payment card expired -->
    <div class="mega-dialog dialog-template-action payment-reminder payment-card-expired hidden"
         role="dialog"
         aria-labelledby="payment-card-reminder-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic sprite-fm-illustration img-dialog-payment-card-exp"></div>
            <h2 id="payment-card-reminder-title">[$payment_card_exp_title]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <p>[$payment_card_exp_desc]</p>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive large update-payment-card">
                    <span>[$707]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: payment-reminder -->
    <div class="mega-dialog dialog-template-action payment-reminder user-management-dialog hidden"
         role="dialog"
         aria-labelledby="payment-reminder-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic sprite-fm-illustration img-dialog-business-expiry hidden"></div>
            <div class="graphic img-dialog-pro-flexi-expiry hidden">
                <i class="sprite-fm-uni icon-crests-pro-flexi-details"></i>
                <i class="sprite-fm-uni icon-takedown"></i>
            </div>
            <h2 id="payment-reminder-title">
                <span class="js-payment-reminder-title-business hidden">[$20401]</span>
                <span class="js-payment-reminder-title-pro-flexi hidden">[$pro_flexi_account_suspended_title]</span>
            </h2>
        </header>

        <section class="content">
            <div class="content-block">
                <p class="js-payment-reminder-description-business hidden">[$20402]</p>
                <p class="js-payment-reminder-description-pro-flexi hidden">[$pro_flexi_account_suspended_description]</p>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive large pay-reactive-acc">
                    <span>[$20403]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: user-management-able-user-dialog.warning -->
    <div class="mega-dialog dialog-template-message user-management-able-user-dialog warning user-management-dialog hidden"
         role="dialog"
         aria-labelledby="user-management-able-user-dialog-warning-title"
         aria-modal="true">

        <header>
            <i class="graphic sprite-fm-uni icon-warning"></i>
            <div>
                <h3 id="user-management-able-user-dialog-warning-title" class="dialog-text-one">- <b>-</b> </h3>
                <p class="bold-warning">-</p>
                <p class="text-two-text">-</p>
            </div>
        </header>

        <footer>
            <div class="footer-container">
                <button class="mega-button cancel-action">
                    <span>-</span>
                </button>
                <button class="mega-button positive ok-action">
                    <span>-</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: group-chat-link -->
    <!-- Group Chat Link !-->
    <div class="mega-dialog dialog-template-main group-chat-link hidden"
         role="dialog"
         aria-labelledby="group-chat-link-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="big-icon group-chat"></i>
            <h2 id="group-chat-link-title">Group Chat Title</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="chat-link-input">
                    <i class="small-icon blue-chain colorized"></i>
                    <input type="text" value="https://mega.nz/chat/uhNHUIZa#DILHMgfq7XDILHMgfq7X">
                </div>
                <div class="info">
                    [$20644]
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive">
                    <span>[$63]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: contact-nickname-dialog -->
    <!-- Contact Nickname dialog -->
    <div class="mega-dialog dialog-template-main contact-nickname-dialog hidden"
         role="dialog"
         aria-labelledby="contact-nickname-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="contact-nickname-dialog-title"></h2>
        </header>
        <section class="content">
            <div class="content-block">
                <div class="input-block">
                    <input id="nickname-input" class="underlinedText" type="text" placeholder="" maxlength="50" autocomplete="off">
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button cancel-button">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive save-button">
                    <span>[$776]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: voucher-info-redeem -->
    <div class="mega-dialog dialog-template-action voucher-info-redeem hidden"
         role="dialog"
         aria-labelledby="voucher-info-redeem-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="voucher-info-redeem-title">[$22114]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="voucher-logo">
                    <div class="plan-icon pro1">
                        <i class="pro1 sprite-fm-uni icon-crests-pro-1-details"></i>
                        <i class="pro2 sprite-fm-uni icon-crests-pro-2-details"></i>
                        <i class="pro3 sprite-fm-uni icon-crests-pro-3-details"></i>
                        <i class="pro4 sprite-fm-uni icon-crests-lite-details"></i>
                        <i class="pro101 sprite-fm-uni icon-crests-pro-flexi-details"></i>
                        <i class="business sprite-fm-uni icon-crests-business-details"></i>
                        <i class="feature"></i>
                    </div>
                    <div class="v-separator"></div>
                    <span class="plan-info v-storage"></span>
                    <div class="v-separator"></div>
                    <span class="plan-info v-transfer"></span>
                </div>
            </div>
            <div class="content-block">
                <h3 class="v-description">[$22120]</h3>
            </div>
            <div class="content-block">
                <div class="hidden s4-voucher-terms-check checkboxOff"></div>
                <label class="hidden radio-txt s4-voucher-terms-label">[$s4_voucher_terms]</label>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button large voucher-info-login">
                    <span>[$171]</span>
                </button>
                <button class="mega-button large positive voucher-info-create">
                    <span>[$968]</span>
                </button>
            </div>
        </footer>
    </div>

    <div class="mega-dialog dialog-template-action pro-discount hidden"
         role="dialog"
         aria-labelledby="pro-discount-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="graphic sprite-fm-illustration img-dialog-upgrade"></i>
            <h2 id="pro-discount-title" class="discount-title"></h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="discount-desc"></div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button large close-btn">
                    <span>[$24705]</span>
                </button>
                <button class="mega-button large positive get-btn">
                    <span>[$24706]</span>
                </button>
            </div>
            <aside>
                <div class="condition hidden">
                    *[$24707]
                </div>
                <div class="fm-picker-notagain checkbox-block">
                    <div class="checkdiv checkboxOff">
                        <input type="checkbox" id="fm-picker-notagain-disscount" class="notagain" />
                    </div>
                    <label for="fm-picker-notagain" class="radio-txt">[$229]</label>
                </div>
            </aside>
        </footer>
    </div>

    <!-- Payment success dialog -->
    <div class="payment-result success hidden theme-dark-forced">
        <div class="payment-close">
            <i class="payment-close-icon sprite-fm-mono icon-dialog-close"></i>
            <span></span>
        </div>
        <div class="payment-result-pad">
            <i class="result-icon sprite-fm-uni icon-success"></i>
            <div class="payment-result-header">[$6961]</div>
            <div class="payment-result-txt">[$19512]</div>
            <button class="mega-button large positive payment-result-button">
                <span>[$6690]</span>
            </button>
        </div>
    </div>

    <!-- Payment failure dialog -->
    <div class="payment-result failed hidden theme-dark-forced">
        <div class="payment-close">
            <i class="payment-close-icon sprite-fm-mono icon-dialog-close"></i>
            <span></span>
        </div>
        <div class="payment-result-pad">
            <i class="result-icon sprite-fm-uni icon-error"></i>
            <div class="payment-result-header">[$6949]</div>
            <div class="payment-result-txt">[$6950]</div>
            <button class="mega-button large negative payment-result-button">
                <span>[$1472]</span>
            </button>
        </div>
    </div>

    <!-- Pending confirmation -->
    <div class="payment-result pending original hidden theme-dark-forced">
        <div class="payment-close">
            <i class="payment-close-icon sprite-fm-mono icon-dialog-close"></i>
            <span></span>
        </div>
        <div class="payment-result-pad">
            <i class="result-icon sprite-fm-uni icon-success"></i>
            <div class="payment-result-header">[$7983]</div>
            <div class="payment-result-txt">[$19513]</div>
            <button class="mega-button large positive payment-result-button">
                <span>[$6690]</span>
            </button>
        </div>
    </div>

    <!-- Payment confirmation pending (alternative) -->
    <div class="payment-result pending alternate hidden theme-dark-forced">
        <div class="payment-close">
            <i class="payment-close-icon sprite-fm-mono icon-dialog-close"></i>
            <span></span>
        </div>
        <div class="payment-result-pad">
            <i class="result-icon sprite-fm-uni icon-success"></i>
            <div class="payment-result-header">[$7983]</div>
            <div class="payment-result-txt">[$19514]</div>
            <button class="mega-button large positive payment-result-button">
                <span>[$6690]</span>
            </button>
        </div>
    </div>

    <!-- Dialog: Download desktop app dialog -->
    <div class="mega-dialog dialog-template-graphic mega-desktopapp-download hidden"
         role="dialog"
         aria-labelledby="mega-desktopapp-download-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header class="dialog-top">
            <div class="graphic sprite-fm-illustration img-dialog-desktop-app"></div>
            <h2 id="mega-desktopapp-download-title">
                <i class="sprite-fm-mono icon-sync"></i>[$19639]
            </h2>
        </header>

        <section class="content">
            <div class="content-block dialog-bottom">
                <p>[$desktopapp_dialog_desc]</p>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive download-app">
                    <span>[$desktopapp_dialog_btn]</span>
                </button>
            </div>
            <aside>
                <div>
                    <a class="clickurl" href="https://mega.io/desktop" target="_blank">[$desktopapp_dialog_other_os]</a>
                </div>
            </aside>
        </footer>
    </div>

    <!-- Dialog: Report Abuse -->
    <div class="mega-dialog dialog-template-main report-abuse hidden"
         role="dialog"
         aria-labelledby="report-abuse-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="report-abuse-title">[$ra_title]</h2>
        </header>

        <section class="content-block js-reportabuse-scroll-panel">
            <span class="js-subtitle subtitle"></span>

            <form id="reportAbuseForm">

                <section class="js-step1 abusetypes-block">
                    <p>[$ra_lbl_selcttype]</p>
                    <div class="radio-buttons">
                        <div class="label-wrap">
                            <div class="abusetype radioOff">
                                <input type="radio" class="abusetype radioOff" value="A">
                            </div>
                            <div class="radio-txt">[$ra_type_a]</div>
                        </div>
                        <div class="label-wrap">
                            <div class="abusetype radioOff">
                                <input type="radio" class="abusetype radioOff" value="B">
                            </div>
                            <div class="radio-txt">[$ra_type_b]</div>
                        </div>
                        <div class="label-wrap">
                            <div class="abusetype radioOff">
                                <input type="radio" class="abusetype radioOff" value="C">
                            </div>
                            <div class="radio-txt">[$ra_type_c]</div>
                        </div>
                        <div class="label-wrap">
                            <div class="abusetype radioOff">
                                <input type="radio" class="abusetype radioOff" value="D">
                            </div>
                            <div class="radio-txt">[$ra_type_d]</div>
                        </div>
                        <div class="label-wrap">
                            <div class="abusetype radioOff">
                                <input type="radio" class="abusetype radioOff" value="E">
                            </div>
                            <div class="radio-txt">[$ra_type_e]</div>
                        </div>
                        <div class="label-wrap">
                            <div class="abusetype radioOff">
                                <input type="radio" class="abusetype radioOff" value="F">
                            </div>
                            <div class="radio-txt">[$ra_type_f]</div>
                        </div>
                        <div class="label-wrap">
                            <div class="abusetype radioOff">
                                <input type="radio" class="abusetype radioOff" value="G">
                            </div>
                            <div class="radio-txt">[$ra_type_g]</div>
                        </div>
                        <div class="label-wrap">
                            <div class="abusetype radioOff">
                                <input type="radio" class="abusetype radioOff" value="H">
                            </div>
                            <div class="radio-txt">[$ra_type_h]</div>
                        </div>
                    </div>
                </section>

                <section class="js-step2 hidden">
                </section>

                <section class="js-step3 hidden">
                </section>

                <section class="js-step4 hidden">
                </section>
            </form>

            <div class="js-abuseerror message-container hidden">
                [$ra_msg_selectoption]
            </div>


            <template id="abuseTemplate">
                <!-- A- Child Sexual Abuse Material -->
                <section>
                    <div id="abuseA">
                        <div class="form-row">
                            <p>[$ra_lbl_webpublised_opt]</p>
                            <textarea class="form-control js-website" placeholder="[$ra_txt_webpublised_pholder]" maxlength="255"></textarea>
                        </div>
                        <div class="form-row">
                            <p>[$ra_lbl_usrpublised_opt]</p>
                            <input class="form-control js-username" placeholder="[$ra_txt_usrpublised_pholder]" type="text" maxlength="255" />
                        </div>
                        <div class="form-row">
                            <div class="checkbox-block">
                                <div class="js-abuse-a-check checkboxOff checkbox">
                                    <input class="checkboxOff" type="checkbox" name="abuse-a-check">
                                </div>
                                <label class="checkbox-txt">[$ra_chk_illegcontent]</label>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- B- Revenge porn, Stolen intimate adult photos, Upskirt adult photos -->
                <section>
                    <div id="abuseB">
                        <p>[$ra_lbl_selctsubtype]</p>
                        <div class="radio-buttons">
                            <div class="label-wrap">
                                <div class="abuseBType radioOff">
                                    <input type="radio" class="abuseBType radioOff" value="R">
                                </div>
                                <div class="radio-txt">[$ra_type_r]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseBType radioOff">
                                    <input type="radio" class="abuseBType radioOff" value="S">
                                </div>
                                <div class="radio-txt">[$ra_type_s]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseBType radioOff">
                                    <input type="radio" class="abuseBType radioOff" value="U">
                                </div>
                                <div class="radio-txt">[$ra_type_u]</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- R- Revenge porn -->
                <!-- S- Stolen intimate adult photos -->
                <section>
                    <div id="abuseRandS">
                        <p>[$ra_lbl_contsubject]</p>
                        <div class="radio-buttons">
                            <div class="label-wrap">
                                <div class="contentowner radioOff">
                                    <input type="radio" class="contentowner radioOff" value="true">
                                </div>
                                <div class="radio-txt">[$78]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="contentowner radioOff">
                                    <input type="radio" class="contentowner radioOff" value="false">
                                </div>
                                <div class="radio-txt">[$79]</div>
                            </div>
                        </div>
                        <div class="js-yesblock sub-container hidden">
                            <div class="form-row">
                                <p>[$ra_lbl_webpublised_opt]</p>
                                <textarea class="form-control js-website" placeholder="[$ra_txt_webpublised_pholder]" maxlength="255"></textarea>
                            </div>
                            <div class="form-row">
                                <p>[$ra_lbl_usrpublised_opt]</p>
                                <input class="form-control js-username" placeholder="[$ra_txt_usrpublised_pholder]" type="text" maxlength="255" />
                            </div>
                        </div>
                        <div class="js-noblock sub-container hidden">
                            <div class="message-container">
                                [$ra_msg_notauthrised]
                            </div>
                        </div>
                    </div>
                </section>

                <!-- U- Upskirt adult photos -->
                <section>
                    <div id="abuseU">
                        <div class="form-row">
                            <p>[$ra_lbl_webpublised_opt]</p>
                            <textarea class="form-control js-website" placeholder="[$ra_txt_webpublised_pholder]" maxlength="255"></textarea>
                        </div>
                        <div class="form-row">
                            <p>[$ra_lbl_usrpublised_opt]</p>
                            <input class="form-control js-username" placeholder="[$ra_txt_usrpublised_pholder]" type="text" maxlength="255" />
                        </div>
                    </div>
                </section>

                <!-- C- Murder, Rape, Gore, Bestiality, Animal killing -->
                <section>
                    <div id="abuseC">
                        <p>[$ra_lbl_selctsubtype]</p>
                        <div class="radio-buttons">
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Murder">
                                </div>
                                <div class="radio-txt">[$ra_type_murder]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Rape">
                                </div>
                                <div class="radio-txt">[$ra_type_rape]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Gore">
                                </div>
                                <div class="radio-txt">[$ra_type_gore]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Bestiality">
                                </div>
                                <div class="radio-txt">[$ra_type_bastiality]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Animal killing">
                                </div>
                                <div class="radio-txt">[$ra_type_animkill]</div>
                            </div>
                        </div>
                        <br>
                        <div class="form-row">
                            <p>[$ra_lbl_webpublised_opt]</p>
                            <textarea class="form-control js-website" placeholder="[$ra_txt_webpublised_pholder]" maxlength="255"></textarea>
                        </div>
                        <div class="form-row">
                            <p>[$ra_lbl_usrpublised_opt]</p>
                            <input class="form-control js-username" placeholder="[$ra_txt_usrpublised_pholder]" type="text" maxlength="255" />
                        </div>
                    </div>
                </section>

                <!-- D- Violent extremism, Terrorism -->
                <section>
                    <div id="abuseD">
                        <p>[$ra_lbl_selctsubtype]</p>
                        <div class="radio-buttons">
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Violent extremism">
                                </div>
                                <div class="radio-txt">[$ra_type_violent]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Terrorism">
                                </div>
                                <div class="radio-txt">[$ra_type_terror]</div>
                            </div>
                        </div>
                        <br>
                        <div class="form-row">
                            <p>[$ra_lbl_webpublised_opt]</p>
                            <textarea class="form-control js-website" placeholder="[$ra_txt_webpublised_pholder]" maxlength="255"></textarea>
                        </div>
                        <div class="form-row">
                            <p>[$ra_lbl_usrpublised_opt]</p>
                            <input class="form-control js-username" placeholder="[$ra_txt_usrpublised_pholder]" type="text" maxlength="255" />
                        </div>
                    </div>
                </section>

                <!-- E- Virus, Malware, Fraud, Hacked data, Game hacks -->
                <section>
                    <div id="abuseE">
                        <p>[$ra_lbl_selctsubtype]</p>
                        <div class="radio-buttons">
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Virus">
                                </div>
                                <div class="radio-txt">[$ra_type_virus]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Malware">
                                </div>
                                <div class="radio-txt">[$ra_type_malware]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Fraud">
                                </div>
                                <div class="radio-txt">[$ra_type_fraud]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Hacked data">
                                </div>
                                <div class="radio-txt">[$ra_type_hacked]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Game hacks">
                                </div>
                                <div class="radio-txt">[$ra_type_gamehack]</div>
                            </div>
                        </div>
                        <br>
                        <div class="form-row">
                            <p>[$ra_lbl_webpublised_opt]</p>
                            <textarea class="form-control js-website" placeholder="[$ra_txt_webpublised_pholder]" maxlength="255"></textarea>
                        </div>
                        <div class="form-row">
                            <p>[$ra_lbl_usrpublised_opt]</p>
                            <input class="form-control js-username" placeholder="[$ra_txt_usrpublised_pholder]" type="text" maxlength="255" />
                        </div>
                    </div>
                </section>

                <!-- F- Copyright, Intellectual Property -->
                <section>
                    <div id="abuseF">
                        <p>[$ra_lbl_selctsubtype]</p>
                        <div class="radio-buttons">
                            <div class="label-wrap">
                                <div class="abuseFType radioOff">
                                    <input type="radio" class="abuseFType radioOff" value="CR">
                                </div>
                                <div class="radio-txt">[$ra_type_copyright]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseFType radioOff">
                                    <input type="radio" class="abuseFType radioOff" value="IP">
                                </div>
                                <div class="radio-txt">[$ra_type_intellectual]</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- CR- Copyright -->
                <section>
                    <div id="abuseCR">
                        <p>[$ra_lbl_meterialowner]</p>
                        <div class="radio-buttons">
                            <div class="label-wrap">
                                <div class="contentowner radioOff">
                                    <input type="radio" class="contentowner radioOff" value="true">
                                </div>
                                <div class="radio-txt">[$78]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="contentowner radioOff">
                                    <input type="radio" class="contentowner radioOff" value="false">
                                </div>
                                <div class="radio-txt">[$79]</div>
                            </div>
                        </div>
                        <div class="js-yesblock sub-container hidden">
                           <p>[$ra_lbl_lodgecomplain] <a href="https://mega.io/copyright" class="clickurl" target="_blank">https://mega.io/copyright</a></p>
                        </div>
                        <div class="js-noblock sub-container hidden">
                            <div class="message-container">
                                [$ra_msg_cr_ip_notauthrised]
                            </div>
                            <div class="hidden">1111</div>
                        </div>
                    </div>
                </section>

                <!-- IP- Intellectual Property -->
                <section>
                    <div id="abuseIP">
                        <p>[$ra_lbl_meterialowner]</p>
                        <div class="radio-buttons">
                            <div class="label-wrap">
                                <div class="contentowner radioOff">
                                    <input type="radio" class="contentowner radioOff" value="true">
                                </div>
                                <div class="radio-txt">[$78]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="contentowner radioOff">
                                    <input type="radio" class="contentowner radioOff" value="false">
                                </div>
                                <div class="radio-txt">[$79]</div>
                            </div>
                        </div>
                        <div class="js-yesblock sub-container hidden">
                            <div class="form-row">
                                <p>[$ra_lbl_webpublised]</p>
                                <textarea class="form-control js-website" placeholder="[$ra_txt_webpublised_pholder]" maxlength="255"></textarea>
                            </div>
                            <div class="form-row">
                                <p>[$ra_lbl_usrpublised]</p>
                                <input class="form-control js-username" placeholder="[$ra_txt_usrpublised_pholder]" type="text" maxlength="255" />
                            </div>
                            <div class="form-row">
                                <p>[$ra_lbl_meterialdesc]</p>
                                <textarea class="form-control js-desc" placeholder="[$ra_txt_decribeabuse_pholder]" maxlength="255"></textarea>
                            </div>
                            <div class="form-row">
                                <p>[$ra_lbl_ownerdetails]</p>
                                <div class="form-row two-col">
                                    <input class="form-control js-owner" placeholder="[$ra_lbl_owner]" type="text" maxlength="255" />
                                    <input class="form-control js-email" placeholder="[$ra_lbl_email]" type="email" maxlength="255" />
                                </div>
                                <div class="form-row two-col">
                                    <input class="form-control js-phone" placeholder="[$ra_lbl_phone]" type="text" maxlength="255" />
                                    <input class="form-control js-address" placeholder="[$ra_lbl_address]" type="text" maxlength="255" />
                                </div>
                                <div class="form-row two-col">
                                    <input class="form-control js-province" placeholder="[$ra_lbl_province]" type="text" maxlength="255" />
                                    <input class="form-control js-postalcode" placeholder="[$ra_lbl_postalcode]" type="text" maxlength="255" />
                                </div>
                                <div class="form-row two-col">
                                    <div class="mega-input form-control half dropdown-input js-countryselector" id="report-country">
                                        <span class="placeholder">[$ra_lbl_country]</span>
                                        <i class="sprite-fm-mono icon-dropdown"></i>
                                        <div class="mega-input-dropdown hidden"><div class="dropdown-scroll"></div></div>
                                    </div>
                                </div>

                            </div>
                            <div class="form-row">
                                <div class="checkbox-block">
                                    <div class="js-abuse-ip-believe checkboxOff checkbox">
                                        <input class="checkboxOff" type="checkbox" name="abuse-believe-check">
                                    </div>
                                    <label class="checkbox-txt">[$ra_chk_faithconfirm]</label>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="checkbox-block">
                                    <div class="js-abuse-ip-aware checkboxOff checkbox">
                                        <input class="checkboxOff" type="checkbox" name="abuse-aware-check">
                                    </div>
                                    <label class="checkbox-txt">[$ra_chk_agreeterms]</label>
                                </div>
                            </div>
                            <div class="form-row">
                                <br>
                            </div>
                         </div>
                         <div class="js-noblock sub-container hidden">
                             <div class="message-container">
                                 [$ra_msg_cr_ip_notauthrised]
                             </div>
                         </div>

                    </div>
                </section>

                <!-- G- Racism, Hate -->
                <section>
                    <div id="abuseG">
                        <p>[$ra_lbl_selctsubtype]</p>
                        <div class="radio-buttons">
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Racism">
                                </div>
                                <div class="radio-txt">[$ra_type_racism]</div>
                            </div>
                            <div class="label-wrap">
                                <div class="abuseSubType radioOff">
                                    <input type="radio" class="abuseSubType radioOff" value="Hate">
                                </div>
                                <div class="radio-txt">[$ra_type_hate]</div>
                            </div>
                        </div>
                        <br>
                        <div class="form-row">
                            <p>[$ra_lbl_webpublised_opt]</p>
                            <textarea class="form-control js-website" placeholder="[$ra_txt_webpublised_pholder]" maxlength="255"></textarea>
                        </div>
                        <div class="form-row">
                            <p>[$ra_lbl_usrpublised_opt]</p>
                            <input class="form-control js-username" placeholder="[$ra_txt_usrpublised_pholder]" type="text" maxlength="255" />
                        </div>
                    </div>
                </section>

                <!-- H- Others -->
                <section>
                    <div id="abuseH">
                        <div class="form-row">
                            <p>[$ra_lbl_decribeabuse]</p>
                            <textarea class="form-control js-desc" placeholder="[$ra_txt_decribeabusetype_pholder]"></textarea>
                        </div>
                        <div class="form-row">
                            <p>[$ra_lbl_webpublised_opt]</p>
                            <textarea class="form-control js-website" placeholder="[$ra_txt_webpublised_pholder]" maxlength="255"></textarea>
                        </div>
                        <div class="form-row">
                            <p>[$ra_lbl_usrpublised_opt]</p>
                            <input class="form-control js-username" placeholder="[$ra_txt_usrpublised_pholder]" type="text" maxlength="255" />
                        </div>
                    </div>
                </section>

            </template>

        </section>

        <!-- container Footer -->
        <footer>
            <div class="footer-container space-between">
                <div>
                    <button class="mega-button action back">
                        <div>
                            <i class="sprite-fm-mono icon-arrow-left"></i>
                        </div>
                        <span>[$822]</span>
                    </button>
                </div>
                <div class="select-wrapper">

                    <button class="mega-button cancel">
                        <span>[$82]</span>
                    </button>
                    <button class="mega-button positive next">
                        <span>[$556]</span>
                    </button>
                    <button class="mega-button positive submit">
                        <span>[$btn_submitreport]</span>
                    </button>
                    <button class="mega-button positive ok">
                        <span>[$81]</span>
                    </button>

                </div>
            </div>
        </footer>
    </div>

    <div class="mega-dialog dialog-template-main stop-backup hidden"
         role="dialog"
         aria-labelledby="stop-backup-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="stop-backup-title">[$stop_backup_button]</h2>
            <p>[$stop_backup_info]</p>
        </header>

        <section class="content">
            <div class="content-block select-action-wrap">
                <div class="select-action">
                    <div class="radio-button radioOff"><input type="radio" name="stop-backup" id="stop-backup-a1" value="0"></div>
                    <div>
                        <label for="stop-backup-a1" class="action-label">
                            [$move_folder_label]
                        </label>
                        <span class="action-info">
                            [$move_folder_info]
                        </span>
                        <div class="path-wrap">
                            <div class="move-label">[$move_to_label]</div>
                            <div class="mega-input box-style disabled js-path-input">
                                <input class="path" type="text" value="Cloud drive/" disabled>
                            </div>
                            <button class="mega-button positive small disabled js-change-path">
                                <span>[$1776]</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="select-action">
                    <div class="radio-button radioOff"><input type="radio" name="stop-backup" id="stop-backup-a2" value="1"></div>
                    <div>
                        <label for="stop-backup-a2" class="action-label">
                            [$delete_folder_label]
                        </label>
                        <span class="action-info">
                            [$delete_folder_info]
                        </span>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="footer-container">
                 <button class="mega-button js-close">
                    <span>[$1597]</span>
                </button>
                <button class="mega-button positive disabled js-confirm">
                    <span>[$870]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: file-request Dialog -->
    <div class="mega-dialog dialog-template-tool file-request hidden"
         role="dialog"
         aria-labelledby="file-request-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="file-request-dialog-title" class="dialog-title"></h2>
            <p class="dialog-caption"></p>
        </header>

        <section class="content">
            <div class="scrollable">
                <div class="content-block primary hidden">
                    <div class="form-row select-folder">
                        <label for="file-request-folder">[$1049]</label>
                        <div class="input-container">
                            <div class="mega-input box-style mega-input-icon">
                                <i class="sprite-fm-mono icon-folder-filled"></i>
                                <input class="file-request-folder" type="text" placeholder="Folder name">
                            </div>
                            <button class="mega-button file-request-select-folder disabled">
                                <span>[$file_request_dialog_button_select_folder]</span>
                            </button>
                        </div>
                    </div>
                    <div class="form-row">
                        <label for="file-request-title">[$file_request_dialog_label_title]</label>
                        <span class="char-count"></span>
                        <div class="mega-input-wrapper">
                            <div class="mega-input box-style">
                                <input class="file-request-title" type="text" placeholder="[$file_request_dialog_placeholder_title]">
                            </div>
                            <div class="message-container"></div>
                        </div>
                    </div>
                    <div class="form-row">
                        <label for="file-request-description">[$16462]</label>
                        <span class="char-count"></span>
                        <div class="mega-input-wrapper">
                            <div class="mega-input box-style">
                                <input class="file-request-description" type="text" placeholder="[$file_request_dialog_placeholder_desc]">
                            </div>
                            <div class="message-container"></div>
                        </div>
                        <p class="caption">[$file_request_dialog_caption_desc]</p>
                    </div>
                    <div class="footer-container space-between preview">
                        <button class="mega-button file-request-preview-button">
                            <span>[$file_request_dialog_button_preview]</span>
                        </button>
                    </div>
                </div>
                <hr class="divider"/>
                <div class="content-block secondary hidden">
                    <div class="form-row">
                        <label for="file-request-share-link">[$file_request_dialog_label_url]</label>
                        <div class="file-request-input input-share">
                            <div class="input-wrapper">
                                <i class="sprite-fm-mono icon-link chain"></i>
                                <input class="file-request-share-link" type="text" value="" readonly="readonly">
                            </div>
                            <div class="button-wrapper">
                                <button class="mega-button positive copy">[$1394]</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <label for="file-request-embed-code">[$file_request_dialog_label_embed]</label>
                        <div class="file-request-embed-button-container">
                            <div class="embed-button-header">
                                [$file_request_dialog_theme_desc]
                            </div>
                            <div class="embed-button-selection light-theme">
                                <div class="embed-block active">
                                    <div class="embed-button-centre">
                                        <div class="embed-button centre-button theme-light-forced">
                                            <div class="embed-content-wrapper">
                                                <div class="embed-mega-icon">
                                                </div>
                                                <div class="embed-action-text">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="embed-button-select">
                                            <div class="embed-button-theme radioOn">
                                                <input type="radio" class="embed-button-theme-input radioOn" value="0">
                                            </div>
                                            <div class="embed-button-subheading">
                                                [$18217]
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="embed-block dark-theme">
                                    <div class="embed-button-centre">
                                        <div class="embed-button centre-button theme-light-forced">
                                            <div class="embed-content-wrapper">
                                                <div class="embed-mega-icon">
                                                </div>
                                                <div class="embed-action-text">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="embed-button-select">
                                            <div class="embed-button-theme radioOff">
                                                <input type="radio" class="embed-button-theme-input radioOff" value="1">
                                            </div>
                                            <div class="embed-button-subheading">
                                                [$18216]
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="file-request-input input-code">
                            <div class="input-wrapper">
                                <i class="tab-icon url sprite-fm-mono icon-embed-code"></i>
                                <input class="file-request-embed-code" type="text" value="" readonly="readonly">
                            </div>
                            <div class="button-wrapper">
                                <button class="mega-button positive copy">[$17408]</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer class="alt-background">
            <div class="footer-container space-between manage">
                <button class="mega-button file-request-remove-button">
                    <span>[$file_request_dialog_button_remove]</span>
                </button>
                <button class="mega-button file-request-preview-button">
                    <span>[$file_request_dialog_button_preview]</span>
                </button>
                <div class="button-container">
                    <button class="mega-button file-request-close-button">
                        <span>[$82]</span>
                    </button>
                    <button class="mega-button file-request-save-button positive">
                        <span>[$msg_dlg_save]</span>
                    </button>
                </div>
            </div>
        </footer>
    </div>

    <!--  S4 related dialogs  -->
    <!-- Dialog: S4-create-bucket-dialog -->
    <div class="mega-dialog dialog-template-main s4 s4-create-bucket-dialog hidden"
         role="dialog"
         aria-labelledby="s4-create-bucket-title"
         aria-modal="true">
        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>
        <header>
            <h2 class="s4-create-bucket-title">[$s4_create_bkt]</h2>
        </header>
        <section class="content">
            <div class="content-block spaced-margin">
                <div class="offset-text">[$s4_enter_bkt_name]</div>
                <div class="mega-input with-icon box-style">
                    <i class="sprite-fm-mono icon-bucket-solid"></i>
                    <input class="megaInputs underlinedText" name="bucket-name" type="text" placeholder="[$s4_bkt_name_txt]" autofocus />
                    <div class="message-container mega-banner"></div>
                </div>
            </div>
        </section>
        <footer>
            <div class="footer-container">
                <button class="mega-button cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive progress disabled">
                    <span>[$158]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: S4-create-user-dialog -->
    <div class="mega-dialog dialog-template-main s4 s4-create-user-dialog hidden"
         role="dialog"
         aria-labelledby="s4-create-user-title"
         aria-modal="true">
        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>
        <header>
            <h2 id="s4-create-user-title">[$s4_user_create]</h2>
        </header>
        <section class="content">
            <div class="content-block">
                <div class="step-1 hidden">
                    <div class="offset-text">[$s4_user_name_enter]</div>
                    <div class="mega-input with-icon box-style">
                        <i class="sprite-fm-mono icon-user-filled"></i>
                        <input class="megaInputs underlinedText" name="user-name-input" type="text" placeholder="[$s4_user_name]" autocomplete="disabled"/>
                        <div class="message-container mega-banner"></div>
                    </div>
                </div>
                <div class="step-2 spaced-margin hidden">
                    <div class="step-head">
                        <div class="head-title">[$s4_user_add_to_group]</div>
                        <div class="search-bar">
                            <i class="sprite-fm-mono icon-preview-reveal"></i>
                            <input class="group-search" placeholder="[$s4_group_search]">
                        </div>
                    </div>
                    <div class="sticky-header-table-container">
                        <div class="s4-table-scroll ps-container ps-theme-default">
                            <table class="group-table data-table table-hover dialog-table">
                                <thead>
                                    <tr>
                                        <th class="col-1"></th>
                                        <th class="col-2 no-pad-start">[$s4_group_name]</th>
                                        <th class="col-3 no-pad-start">[$s4_assigned_policies]</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="group-row group-template hidden">
                                        <td class="col-1">
                                            <div class="group-check checkboxOff checkbox">
                                                <input class="checkboxOff" type="checkbox" name="groupA">
                                            </div>
                                        </td>
                                        <td class="col-2 no-pad-start">
                                            <span class="group-name">Proxy devs</span>
                                        </td>
                                        <td class="col-3 no-pad-start">
                                            <span class="group-policies">Policies</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="create-group-button">
                        <button class="mega-button action create-group" title="Create new group">
                            <div>
                                <i class="sprite-fm-mono icon-add-circle icon-green"></i>
                            </div>
                            <span>[$s4_group_new]</span>
                        </button>
                    </div>
                    <div class="create-group-container hidden">
                        <div class="offset-text">[$18509]</div>
                        <div class="mega-input with-icon box-style">
                            <i class="sprite-fm-mono icon-contacts"></i>
                            <input class="group-name megaInputs underlinedText" type="text" name="group-name-input" placeholder="[$s4_group_name]" autocomplete="disabled"/>
                            <div class="message-container mega-banner"></div>
                        </div>
                        <button class="mega-button positive save-group disabled">
                            <span>[$158]</span>
                        </button>
                    </div>
                </div>
                <div class="step-3 spaced-margin hidden">
                    <div class="step-head">
                        <div class="head-title">[$s4_user_attach_policy]</div>
                        <div class="search-bar">
                            <i class="sprite-fm-mono icon-preview-reveal"></i>
                            <input class="policies-search" placeholder="[$s4_policy_search]">
                        </div>
                    </div>
                    <div class="sticky-header-table-container">
                        <div class="s4-table-scroll ps-container ps-theme-default">
                            <table class="policy-table data-table table-hover dialog-table">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th class="no-pad-start">[$s4_policy_name]</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="policy-row policy-template hidden">
                                        <td>
                                            <div class="policy-check checkboxOff checkbox">
                                                <input class="checkboxOff" type="checkbox" name="policyA">
                                            </div>
                                        </td>
                                        <td class="no-pad-start">
                                            <span class="policy-name">Policy name</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="step-4 hidden">
                    <table class="create-item-info">
                        <tr class="create-user-name">
                            <td>
                                <div class="section-label">[$s4_user_name_label]</div>
                            </td>
                            <td>
                                <span class="container-user-name"></span>
                            </td>
                        </tr>
                        <tr class="create-user-arn">
                            <td>
                                <div class="section-label">[$s4_user_arn_label]</div>
                            </td>
                            <td>
                                <span class="container-user-arn"></span>
                            </td>
                        </tr>
                    </table>
                    <div class="badge-template badge hidden">
                        <div class="badge-name"></div>
                        <button class="mega-button small action remove">
                            <i class="sprite-fm-mono icon-dialog-close"></i>
                        </button>
                    </div>
                    <div class="info-container-wrap group-info">
                        <div class="section-label">[$s4_groups_label]</div>
                        <div class="badge-container"></div>
                    </div>
                    <div class="info-container-wrap policy-info">
                        <div class="section-label">[$s4_policies_label]</div>
                        <div class="badge-container"></div>
                    </div>
                </div>
                <div class="step-5 hidden">
                    <div class="create-success-text user-success-text"></div>
                    <div class="info-box keys-table">
                        <div class="row">
                            <div class="name">[$s4_key_access_colon]</div>
                            <div class="cell">
                                <div class="val access-key-value"></div>
                                <button class="mega-button small action copy" data-key="ak">
                                    <i class="sprite-fm-mono icon-copy"></i>
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="name">[$s4_key_secret_colon]</div>
                            <div class="cell">
                                <div class="val">
                                    <input class="secret-key-value" type="password" readonly />
                                </div>
                                <button class="mega-button small action toggle-vis">
                                    <i class="sprite-fm-mono icon-eye-reveal"></i>
                                </button>
                                <button class="mega-button small action copy" data-key="sk">
                                    <i class="sprite-fm-mono icon-copy"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="footer-container">
                <button class="mega-button action regress hidden">
                    <i class="sprite-fm-mono icon-arrow-left"></i>
                    <div>[$822]</div>
                </button>
                <button class="mega-button cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive progress disabled">
                    <span>[$158]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: S4-create-group-dialog -->
    <div class="mega-dialog dialog-template-main s4 s4-create-group-dialog hidden"
         role="dialog"
         aria-labelledby="s4-create-group-dialog-title"
         aria-modal="true">
        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>
        <header>
            <h2 id="s4-create-group-dialog-title">[$s4_group_create]</h2>
        </header>
        <section class="content">
            <div class="content-block">
                <div class="step-1 spaced-margin hidden">
                    <div class="offset-text">[$18509]</div>
                    <div class="mega-input with-icon box-style">
                        <i class="sprite-fm-mono icon-contacts"></i>
                        <input class="megaInputs underlinedText" name="group-name-input" type="text" placeholder="[$s4_group_name]" autocomplete="disabled"/>
                        <div class="message-container mega-banner"></div>
                    </div>
                </div>
                <div class="step-2 spaced-margin hidden">
                    <div class="step-head">
                        <div class="head-title">[$s4_group_attach_policy]</div>
                        <div class="search-bar">
                            <i class="sprite-fm-mono icon-preview-reveal"></i>
                            <input class="policies-search" placeholder="[$s4_policy_search]">
                        </div>
                    </div>
                    <div class="sticky-header-table-container">
                        <div class="s4-table-scroll ps-container ps-theme-default">
                            <table class="policy-table data-table table-hover dialog-table">
                                <thead>
                                    <tr>
                                        <th class="col-1"></th>
                                        <th class="col-2 no-pad-start">[$s4_policy_name]</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="policy-row policy-template hidden">
                                        <td class="col-1">
                                            <div class="policy-check checkboxOff checkbox">
                                                <input class="checkboxOff" type="checkbox" name="policyA">
                                            </div>
                                        </td>
                                        <td class="col-2 no-pad-start">
                                            <span class="policy-name">Policy name</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="step-3 spaced-margin hidden">
                    <div class="step-head">
                        <div class="head-title">[$s4_group_select_users]</div>
                        <div class="search-bar">
                            <i class="sprite-fm-mono icon-preview-reveal"></i>
                            <input class="users-search" placeholder="[$s4_user_search]">
                        </div>
                    </div>
                    <div class="sticky-header-table-container">
                        <div class="s4-table-scroll ps-container ps-theme-default">
                            <table class="group-users-table data-table table-hover dialog-table">
                                <thead>
                                    <tr>
                                        <th class="col-1"></th>
                                        <th class="col-2 no-pad-start">[$s4_user_name]</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="group-user-row group-user-template hidden">
                                        <td class="col-1">
                                            <div class="group-user-check checkboxOff checkbox">
                                                <input class="checkboxOff" type="checkbox" name="userA">
                                            </div>
                                        </td>
                                        <td class="col-2 no-pad-start">
                                            <span class="group-user-name">ABC DEF</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="step-4 hidden">
                    <table class="create-item-info">
                        <tr class="create-group-name">
                            <td>
                                <div class="section-label">[$s4_group_name_label]</div>
                            </td>
                            <td>
                                <span class="container-group-name"></span>
                            </td>
                        </tr>
                        <tr class="create-group-arn">
                            <td>
                                <div class="section-label">[$s4_group_arn_label]</div>
                            </td>
                            <td>
                                <span class="container-group-arn"></span>
                            </td>
                        </tr>
                    </table>
                    <div class="badge-template badge hidden">
                        <div class="badge-name"></div>
                        <button class="mega-button small action remove">
                            <i class="sprite-fm-mono icon-dialog-close"></i>
                        </button>
                    </div>
                    <div class="info-container-wrap user-info">
                        <div class="section-label">[$s4_users_label]</div>
                        <div class="badge-container"></div>
                    </div>
                    <div class="info-container-wrap policy-info">
                        <div class="section-label">[$s4_policies_label]</div>
                        <div class="badge-container"></div>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="footer-container">
                <button class="mega-button action regress hidden">
                    <i class="sprite-fm-mono icon-arrow-left"></i>
                    <div>[$822]</div>
                </button>
                <button class="mega-button cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive progress disabled">
                    <span>[$158]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: S4-create-access-key-dialog -->
    <div class="mega-dialog dialog-template-main s4 s4-create-access-key-dialog hidden"
         role="dialog"
         aria-labelledby="s4-create-access-key-title"
         aria-modal="true">
        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>
        <header>
            <h2 id="s4-create-access-key-title">[$s4_key_create]</h2>
        </header>
        <section class="content">
            <div class="content-block">
                <div class="step-1 spaced-margin hidden">
                    <div class="offset-text">[$s4_key_name_enter]</div>
                    <div class="mega-input with-icon box-style">
                        <i class="sprite-fm-mono icon-key"></i>
                        <input class="megaInputs underlinedText" name="key-name-input" type="text" placeholder="[$s4_key_name]" autocomplete="disabled"/>
                        <div class="message-container mega-banner"></div>
                    </div>
                    <div class="radio-buttons">
                        <div class="radio-wrap">
                            <div class="user-radio radioOn">
                                <input type="radio" name="user" value="rootuser" checked>
                            </div>
                            <div class="radio-txt">[$s4_user_root]</div>
                        </div>
                        <div class="radio-wrap">
                            <div class="user-radio radioOff">
                                <input type="radio" name="user" value="subuser">
                            </div>
                            <div class="radio-txt">[$s4_user_sub]</div>
                        </div>
                    </div>
                    <div class="user-select-wrap hidden">
                        <div class="step-head">
                            <div class="head-title">[$s4_user_assign_title]</div>
                            <div class="search-bar">
                                <i class="sprite-fm-mono icon-preview-reveal"></i>
                                <input class="container-user-search" placeholder="[$s4_user_search]">
                            </div>
                        </div>
                        <div class="sticky-header-table-container">
                            <div class="s4-table-scroll ps-container ps-theme-default">
                                <table class="key-users-table data-table">
                                    <thead>
                                        <tr>
                                            <th class="col-1">[$s4_user_name]</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="key-user-row key-user-template hidden">
                                            <td class="col-1">
                                                <span class="key-user-name">user name</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="step-2 hidden">
                    <div class="create-success-text key-success-text"></div>
                    <div class="info-box keys-table">
                        <div class="row">
                            <div class="name">[$s4_key_access_colon]</div>
                            <div class="cell">
                                <div class="val access-key-value"></div>
                                <button class="mega-button small action copy" data-key="ak">
                                    <i class="sprite-fm-mono icon-copy"></i>
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="name">[$s4_key_secret_colon]</div>
                            <div class="cell">
                                <div class="val">
                                    <input class="secret-key-value" type="password" readonly />
                                </div>
                                <button class="mega-button small action toggle-vis">
                                    <i class="sprite-fm-mono icon-eye-reveal"></i>
                                </button>
                                <button class="mega-button small action copy" data-key="sk">
                                    <i class="sprite-fm-mono icon-copy"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="footer-container">
                <button class="mega-button cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive progress disabled">
                    <span>[$158]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: S4-bucket-settings-dialog -->
    <div class="mega-dialog dialog-template-main s4 s4-bucket-settings-dialog hidden"
         role="dialog"
         aria-labelledby="s4-bucket-settings-title"
         aria-modal="true">
        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>
        <header>
            <h2 id="s4-bucket-settings-title">[$s4_bkt_settings]</h2>
        </header>
        <section class="content">
            <div class="content-block">
                <div class="fm-dialog-tabs">
                    <div class="fm-dialog-tab info active" data-target="bucket-info">[$892]</div>
                    <div class="fm-dialog-tab policies" data-target="bucket-policies">[$s4_policy_label]</div>
                    <div class="fm-dialog-tab access" data-target="bucket-access">[$s4_url_access_label]</div>
                    <div class="clear"></div>
                </div>
                <div class="content-container bucket-info">
                    <div class="bucket-info-field name">
                        <span class="label">[$1764]</span>
                        <span class="value"></span>
                    </div>
                    <div class="bucket-info-field total-size">
                        <span class="label">[$22130]</span>
                        <span class="value"></span>
                    </div>
                    <div class="bucket-info-field contains">
                        <span class="label">[$22147]</span>
                        <span class="value"></span>
                    </div>
                    <div class="bucket-info-field date-added">
                        <span class="label">[$22143]</span>
                        <span class="value"></span>
                    </div>
                </div>
                <div class="content-container bucket-policies hidden">
                    <div class="policies-header-wrapper">
                        <span class="policies-header">[$s4_policy_label]</span>
                        <a class="examples clickurl" target="_blank" href="https://help.mega.io/megas4/s4-buckets/bucket-policies">[$s4_more_about_bucket_pol]</a>
                    </div>
                    <div class="policies-editor">
                        <textarea class="txtar"></textarea>
                    </div>
                    <div class="fm-notification-block bucket-policy-warning">[$s4_invalid_policy]</div>
                </div>
                <div class="content-container bucket-access hidden">
                    <div class="access-options">
                        <div class="radio-wrap">
                            <div class="access-radio radioOn">
                                <input type="radio" name="bucket-access" value="0">
                            </div>
                            <div class="radio-txt">[$s4_url_obj_level_txt]</div>
                        </div>
                        <div class="offset-subtext">[$s4_url_obj_level_subtxt]</div>
                    </div>
                    <div class="access-options">
                        <div class="radio-wrap">
                            <div class="access-radio radioOff">
                                <input type="radio" name="bucket-access" value="1">
                            </div>
                            <div class="radio-txt">[$s4_url_grant_txt]</div>
                        </div>
                        <div class="offset-subtext">[$s4_url_grant_subtxt]</div>
                    </div>
                    <div class="access-options">
                        <div class="radio-wrap">
                            <div class="access-radio radioOff">
                                <input type="radio" name="bucket-access" value="2">
                            </div>
                            <div class="radio-txt">[$s4_url_deny_txt]</div>
                        </div>
                        <div class="offset-subtext">[$s4_url_deny_subtxt]</div>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="footer-container">
                <button class="mega-button cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive progress">
                    <span>[$707]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Dialog: S4-object-access-dialog -->
    <div class="mega-dialog dialog-template-main s4 s4-object-access-dialog hidden"
         role="dialog"
         aria-labelledby="s4-object-access-title"
         aria-modal="true">
        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>
        <header>
            <h2 id="s4-object-access-title">[$s4_access_dig_header]</h2>
        </header>
        <section class="content">
            <div class="content-block">
                <div class="object-access-entry">
                    <div>
                        <div class="subtitle-txt">
                            [$s4_public_url]
                        </div>
                        <div class="content-txt">
                            [$s4_access_enable_msg]
                        </div>
                    </div>
                    <div class="mega-switch pub-access-toggle toggle-off" role="switch" aria-checked="false" tabindex="0">
                        <div class="mega-feature-switch"></div>
                    </div>
                </div>
                <div class="fm-notification-block bucket-access-warning"></div>
            </div>
            <div class="content-block">
                <div class="object-access-entry file-info inactive">
                    <div class="subtitle-txt">
                        <span class="item-type-icon audio file"><img alt=""/></span>
                        <span class="file-name">Object 2</span>
                        <span class="file-size">20 MB</span>
                    </div>
                    <div class="input-container">
                        <div class="user-input-wrap">
                            <i class="sprite-fm-mono icon-link chain"></i>
                            <input type="text" readonly="" value="">
                        </div>
                        <button class="mega-button positive copy" data-simpletip="[$s4_enable_obj_sharing]" data-simpletipoffset="2" data-simpletipposition="top">
                            <span>[$63]</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        <footer class="">
            <div class="footer-container"></div>
        </footer>
    </div>

    <!-- Dialog: s4-setup-dialog -->
    <div class="mega-dialog dialog-template-panes s4 s4-setup-dialog hidden"
         role="dialog"
         aria-labelledby="s4-setup-title"
         aria-modal="true">
        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>
        <section class="side-pane">
            <img alt="" src="{staticpath}images/mega/icons-3d/illustration-s4-3d.png" />
            <div class="nav">
                <div class="nav-step nav-step-2">
                    <div class="number">
                        <span>1</span>
                        <i class="sprite-fm-mono icon-check-small-regular-outline"></i>
                    </div>
                    <div class="name">
                        [$s4_setup_endpoints]
                    </div>
                </div>
                <div class="separator"></div>
                <div class="nav-step nav-step-3 nav-step-4">
                    <div class="number">
                        <span>2</span>
                        <i class="sprite-fm-mono icon-check-small-regular-outline"></i>
                    </div>
                    <div class="name">
                        [$s4_create_root_key]
                    </div>
                </div>
                <div class="separator"></div>
                <div class="nav-step nav-step-5 nav-step-6">
                    <div class="number">
                        <span>3</span>
                        <i class="sprite-fm-mono icon-check-small-regular-outline"></i>
                    </div>
                    <div class="name">
                        [$s4_create_bkt]
                    </div>
                </div>
            </div>
        </section>

        <section class="content-pane">
            <div class="steps step-1 hidden">
                <header>
                    <h2 class="s4-setup-title">[$s4_get_started]</h2>
                </header>
                <section class="content">
                    <div class="content-block">
                        <p>[$s4_get_started_info]</p>
                        <p class="higher">[$s4_skip_setup_header]</p>
                        <ul>
                            <li><span>[$s4_tip_setup_using_s3]</span></li>
                            <li><span>[$s4_tip_create_key]</span></li>
                            <li class="hidden"><span>[$s4_tip_encryption_info]</span></li>
                            <li><span>[$s4_tip_amazon_support]</span></li>
                            <li><span>[$s4_tip_check_email]</span></li>
                        </ul>
                    </div>
                </section>
            </div>

            <div class="steps step-2 hidden">
                <header>
                    <h2 class="s4-setup-title">[$s4_copy_endpoints]</h2>
                </header>
                <section class="content">
                    <div class="content-block">
                        <p class="higher">[$s4_s3_compatible_endpoints]</p>
                        <p class="secondary">[$s4_s3_endpoint_prefix_tip]</p>
                        <table class="secondary-table js-endpoints-table"></table>
                        <p class="secondary higher"><b>[$s4_api_prefix_usage]</b></p>
                        <ul class="secondary js-endpoints-desc"></ul>
                        <a href="https://github.com/meganz/s4-specs?tab=readme-ov-file#12-endpoints" class="clickurl secondary" target="_blank">[$s4_endpoints_more_info]</a>
                    </div>
                </section>
            </div>

            <div class="steps step-3 hidden">
                <header>
                    <h2 class="s4-setup-title">[$s4_create_root_access_key]</h2>
                </header>
                <section class="content">
                    <div class="content-block">
                        <p>[$s4_access_keys_info] </p>
                        <img alt="" class="step-icon" src="{staticpath}images/mega/icons-3d/icon-key-3d.png" />
                        <div class="offset-text">[$s4_key_name_enter]</div>
                        <div class="mega-input with-icon box-style">
                            <i class="sprite-fm-mono icon-key"></i>
                            <input class="megaInputs underlinedText" name="key-name-input" type="text" placeholder="[$s4_key_name]" autocomplete="disabled"/>
                            <div class="message-container mega-banner"></div>
                        </div>
                    </div>
                </section>
            </div>

            <div class="steps step-4 hidden">
                <header>
                    <h2 class="s4-setup-title">[$s4_key_created_success]</h2>
                </header>
                <section class="content">
                    <div class="content-block">
                        <p>[$s4_manage_keys_info]</p>
                        <div class="info-box keys-table">
                            <div class="row">
                                <div class="name">[$s4_key_access_colon]</div>
                                <div class="cell">
                                    <div class="val access-key-value"></div>
                                    <button class="mega-button small action copy" data-key="ak">
                                        <i class="sprite-fm-mono icon-copy"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="name">[$s4_key_secret_colon]</div>
                                <div class="cell">
                                    <div class="val">
                                        <input class="secret-key-value" type="password" readonly />
                                    </div>
                                    <button class="mega-button small action toggle-vis">
                                        <i class="sprite-fm-mono icon-eye-reveal"></i>
                                    </button>
                                    <button class="mega-button small action copy" data-key="sk">
                                        <i class="sprite-fm-mono icon-copy"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="secondary-btns">
                            <button class="mega-button download-key">
                                <span>[$s4_download_key_btn]</span>
                            </button>
                        </div>
                    </div>
                </section>
            </div>

            <div class="steps step-5 hidden">
                <header>
                    <h2 class="s4-setup-title">[$s4_create_first_bucket]</h2>
                </header>
                <section class="content">
                    <div class="content-block">
                        <p>[$s4_managing_buckets_info]</p>
                        <a href="https://help.mega.io/megas4/s4-buckets" class="clickurl" target="_blank">[$s4_buckets_more_info]</a>
                        <img alt="" class="step-icon" src="{staticpath}images/mega/icons-3d/icon-bucket-3d.png" />
                        <div class="offset-text">[$s4_enter_bkt_name]</div>
                        <div class="mega-input with-icon box-style">
                            <i class="sprite-fm-mono icon-bucket-solid"></i>
                            <input class="megaInputs underlinedText" name="bucket-name" type="text" placeholder="[$s4_bkt_name_txt]" autofocus="">
                            <div class="message-container mega-banner"></div>
                        </div>
                    </div>
                </section>
            </div>

            <div class="steps step-6 hidden">
                <header>
                    <h2 class="s4-setup-title">[$s4_setup_complete]</h2>
                </header>
                <section class="content">
                    <div class="content-block">
                        <p>[$s4_setup_complete_info]</p>
                        <h3>[$s4_more_actions_info]</h3>
                        <div class="help-wrapper">
                            <div class="info-box help">
                                <img alt="" class="help-icon" src="{staticpath}images/mega/icons-3d/icon-lightbulb-3d.png" />
                                <h3>[$384]</h3>
                                <p class="secondary">[$s4_troubleshooting]</p>
                                <a href="https://help.mega.io/megas4" class="clickurl read-more" target="_blank">
                                    <span>[$8742]</span>
                                    <i class="sprite-fm-mono icon-arrow-right-regular-outline"></i>
                                </a>
                            </div>
                            <div class="info-box git">
                                <img alt="" class="help-icon" src="{staticpath}images/mega/icons-3d/icon-list-3d.png" />
                                <h3>[$github_name]</h3>
                                <p class="secondary">[$s4_docs_info]</p>
                                <a href="https://github.com/meganz/s4-specs" class="clickurl read-more" target="_blank">
                                    <span>[$read_guide_btn]</span>
                                    <i class="sprite-fm-mono icon-arrow-right-regular-outline"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <footer>
                <div class="footer-container align-end">
                    <button class="mega-button manage-bucket-settings hidden">
                        <span>[$s4_manage_bucket_settings_btn]</span>
                    </button>
                    <button class="mega-button skip-step hidden">
                        <span>[$1379]</span>
                    </button>
                    <button class="mega-button skip-setup">
                        <span>[$s4_skip_setup_btn]</span>
                    </button>
                    <button class="mega-button positive setup progress">
                        <span>[$s4_setup_s4_btn]</span>
                    </button>
                </div>
            </footer>
        </section>
    </div>
    <!-- End of S4 Dialog: s4-setup-dialog -->

    <!-- Dialog: Welcome for new subscriberes / newly upgraded subscribers -->
    <div class="mega-dialog dialog-template-tool upgrade-welcome-dialog hidden"
        role="dialog"
        aria-labelledby=""
        aria-modal="true">
        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>
        <section class="upgrade-welcome-content-left">
            <section>
                <div class="top-image-container">
                    <i class="top-image"></i>
                </div>
                <header></header>
                <div class="thanks-text"></div>
            </section>
            <section class="welcome-dialog content">
                <div class="welcome-dialog plan-info-header">[$you_also_get]</div>
                <div class="welcome-dialog content-block">
                    <i class="sprite-fm-mono icon-share-outgoing-external"></i>
                    <div class="content-info transfer-sharing">
                        <div class="welcome-dialog info-header">[$pr_trns_share]</div>
                        <div class="welcome-dialog info-text">[$welcome_dialog_share_transfer]</div>
                    </div>
                </div>
                <div class="welcome-dialog content-block">
                    <i class="sprite-fm-mono icon-lock"></i>
                    <div class="content-info additional-security">
                        <div class="welcome-dialog info-header">[$welcome_dialog_addit_security]</div>
                        <div class="welcome-dialog info-text">[$welcome_dialog_secure_links]</div>
                    </div>
                </div>
                <div class="welcome-dialog content-block">
                    <i class="sprite-fm-mono icon-lock-plain"></i>
                    <div class="content-info additional-security">
                        <div class="welcome-dialog info-header">[$mega_pwm]</div>
                        <div class="welcome-dialog info-text">[$pro_welcome_dialog_pwm_desc]</div>
                    </div>
                </div>
                <div class="welcome-dialog content-block">
                    <i class="sprite-fm-mono icon-zap"></i>
                    <div class="content-info additional-security">
                        <div class="welcome-dialog info-header">[$mega_vpn]</div>
                        <div class="welcome-dialog info-text">[$pro_welcome_dialog_vpn_desc]</div>
                    </div>
                </div>
                <div class="welcome-dialog content-block">
                    <i class="sprite-fm-mono icon-user-square-thin-outline"></i>
                    <div class="content-info additional-security">
                        <div class="welcome-dialog info-header">[$welc_dlg_unrestricted_calls]</div>
                        <div class="welcome-dialog info-text">[$welc_dlg_host_calls]</div>
                    </div>
                </div>
            </section>
        </section>
        <footer>
            <button class="mega-button positive">[$81]</button>
        </footer>
    </div>
    <!-- Dialog: rewind-download-upgrade -->
    <div class="mega-dialog dialog-template-graphic rewind-download-upgrade hidden"
       role="dialog"
       aria-labelledby="rewind-upgrade-title"
       aria-modal="true">

       <button class="close js-close" aria-label="[$148]">
           <i class="sprite-fm-mono icon-dialog-close"></i>
       </button>

       <header>
           <div class="graphic sprite-fm-illustration img-rewind-download-upgrade"></div>
           <h2 class="rewind-upgrade-title">[$rewind_upgrade_dialog_title]</h2>
       </header>

       <section class="content">
           <div class="content-block">
               <p>[$rewind_upgrade_dialog_desc]</p>
           </div>
       </section>

       <footer>
           <aside>
               <button class="mega-button positive btn-download-upgrade"><span>[$433]</span></button>
           </aside>
       </footer>
   </div>

    <!-- Dialog: upgrade-to-pro-dialog -->
    <!-- Experimental upgrade to pro dialog for targeted free users only !-->
    <div class="mega-dialog dialog-template-message upgrade-to-pro-dialog hidden"
         role="dialog"
         aria-labelledby="upgrade-to-pro-dialog-title"
         aria-modal="true">

        <section class="content">
            <div class="dialog-title-and-description">
                <div class="upgrade-to-pro-dialog-title">[$view_upgrade_pro_dialog_title]</div>
                <div class="upgrade-to-pro-dialog-description"></div>
            </div>
            <div class="tabs">
                <div class="tab template" data-tab-num="" data-evt=""></div>
            </div>
            <div class="info-container">
                <div class="image-container">
                    <i class="image"></i>
                </div>
                <div class="title-and-blurb">
                    <div class="title"></div>
                    <div class="blurb"></div>
                </div>
            </div>
            <div class="price-disclaimer hidden">* [$est_price_acc_billed_euro]</div>
        </section>

        <footer>
            <button class="mega-button close-dialog">[$maybe_later_btn]</button>
            <button class="mega-button positive upgrade">[$8696]</button>
        </footer>
    </div>

    <!-- Dialog: new nav promo -->
    <div class="mega-dialog dialog-template-graphic ob-promo-dialog hidden"
         role="dialog"
         aria-labelledby="ob-promo-dialog-title"
         aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic sprite-fm-illustration img-ob-promo-dialog"></div>
            <h2 class="ob-promo-dialog-title">[$promo_new_layout_1_title]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <p>
                    [$promo_new_layout_1_body]
                </p>
            </div>
        </section>

        <footer>
            <aside>
                <button class="mega-button secondary js-close">
                    <span>[$1379]</span>
                </button>
                <button class="mega-button positive btn-ob-promo-action">
                    <span>[$onboard_megachat_dlg1_btn]</span>
                </button>
            </aside>
        </footer>
    </div>

    <!-- Dialog: dc-app-promo-dialog -->
    <!-- Experimental upgrade to pro dialog for targeted free users only !-->
    <div class="mega-dialog dc-app-promo-dialog hidden"
         role="dialog"
         aria-label="[$20826]"
         aria-modal="true">

         <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <section class="content">
            <div class="image-container">
                <i class="image"></i>
            </div>

            <div class="tabs-container">
                <div class="tabs">
                    <div class="tab template" data-tab-num="" data-evt=""></div>
                </div>
            </div>

            <div class="info-container">
                <div class="title-and-description">
                    <div class="title"></div>
                    <div class="description"></div>
                </div>
            </div>
        </section>

        <footer>
            <button class="mega-button positive"></button>
        </footer>
    </div>

</section>

<section class="mega-dialog-container">
    <!-- Dialog: device-rename-dialog -->
    <div class="mega-dialog dialog-template-main device-rename-dialog hidden"
        role="dialog"
        aria-labelledby="device-rename-dialog-title"
        aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <h2 id="device-rename-dialog-title">[$device_rename_dialog_header]</h2>
        </header>

        <section class="content">
            <div class="content-block">
                <div class="device-rename-input-bl">
                    <i class="sprite-fm-theme"></i>
                    <input name="dialog-device-rename" type="text" value="[$157]" />
                </div>
                <div class="duplicated-input-warning">
                    <span>[$17578]</span>
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button device-rename-dialog-button cancel">
                    <span>[$82]</span>
                </button>
                <button class="mega-button positive device-rename-dialog-button rename">
                    <span>[$61]</span>
                </button>
            </div>
        </footer>
    </div>

</section>
